






















• 本 I 1 ? 掲攸のリスト使⑴によって生じたいかなる拟害にっいても.邨社および答者は一切の汽任を負 
いかねませんので，あらかじめご了承ください. 

• 本 A に阒する質問は，すべて封 •*? でお顋いいたします.お祖話によるご質問には一切お答えできま 
せん. 

參本に記敝されている会社名.製品名はそれぞれの会社の商標， mMm . 商品名です. 

• 本潜は表記のバージョンにっいての解説离で，発行時点の w 新バージョンに基づいています.しかし 
ぶ锫の性質上 • 時の経過とともにソフトウェアや規格の次のバージョンが出て，いっかは占いバージ 
ョンの解説•穿になるときがきます.本方を購入されるお客様は，ご使用のソフトなどのバージョンを 
確認してください. 

• 掲戟のインターネットの接統先情報なども，執筆時点で確認したものですので，本書の記述とは異 
なっていることもありえますのでご了承ください. 



はじめに 


筆者がはじめて触れた WWW 関連のモノは. MOSAIC でした.その後の衝撃的な Netscape の登場. 
WWW ブラウザの能力の拡張 . Windows 95の普及に伴ろインターネット利用者の急増などが，ごく短い 
間に起こりました. 

96年12月. W 3 C は CSS (Cascading Style Sheet ) を提唱•推奨しました. 97年には . Netscape 
Navigator 4.0 や Internet Explorer 3.02. 4.0 が CSS をサボートしはじめました.そして今年の5月12 
日になつて CSS 2 が勧告されました.未だに CSS 2 を完全にサボートした WWW ブラウザはありません 
が.それも時間の問題だと考えられます. 

ようやく我々は.文霪を簡潔に記述する方法 （ HTML ) と.その文 S のスタイルを調整する方法 ( CSS ) 
を手に入れました.この2つを組み合わせれば，ワードプロセッサや DTP ソフトに対抗できるほどの文 
謹表現が可能です. 


本霞は. CSS と HTML を用いて読みやすい文 S を作成するための手引きを目指して作られました.し 
たがつて. CSS や HTML をトリツキーに用い派手な効果を得るのではなく.『見出しは見出しらしく.本 
文は本文らしく j を目標に S いたスタイル指定の考え方を紹介しました. 

OHTML 文■に問する知«の整理 

HTML 文霪からスタイル情報を剥鸾し.スタイルシートに押し込みます.これにより， HTML 文霱はよ 
り串純で明快になります. 

❷スタイルシートを記述する際の考え方の紹介 

ただブロパティをいじつただけでは.望ましい使い方はわかりません.理想図をもとにした設計から実 
際にシートを記述するまでを.例を用いてガイドします. 



本書を読むにあたつて. HTML 文 S 作成経験やプログラミング記述経験があるほうが望ましいのですが， 
なくても理解することは可能です. 「 WWW できれいな文書を公開したい j という意志があれば,_例示し 


たスタイルシートを参考に試行錯誤するうちに.スタイルシートをマスターできる 


本書が完成するまでには. 多くの人のご助力をいただきました. 

矢野啓介様には初期段階で内容の検討を手伝っていただきました.石野恿一郎様と内田明様は.まとめ 
の段階で例文内のいくつかの文法的な誤りや表現の曖昧さを指摘してくださました.幾重にもお礼申し 
上げます.そして.少々偏屈な内容にもかかわらず出版を可してくださて 
長，金田冨士男氏に感謝します. 


1998年7月吉日 

すみけんたろう 
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本書で使われている 
用語の解説と注意事項 



用語の解説 

♦ W3C (WWW Consortium ) とは 

WWW 技術の標準化と推進を目的とする国際字術研究開発組織で. 94年に設立されました.マサチュー 
セツツエ科大学計緯機科学研究所 ( MIT / LCS ) • フランス国立情報処理自動化研究所 ( INRIA ). 塍應義垫大学 
SFC 研究所 （ Keio - SFC ) の3機関がホストとして共同運営にあたっています. 

HTML や CSS の仕様衋は. W 3 C の WWW サイト ( http :// www . w 3 c . org /) から無料で入手できます.本 
書の内容は. W 3 C の公開する仕様書に基づいて需かれています. 


♦ URL (Uniform Resource Locator ) とは 

インターネット上のデータなどの位 S を表す文字列. http :// www . gihyo . co . jp /, ftp :// SunSITE . sut . ac . jp /, 
mailto : foo @ bar . com など.一般に.ファイル名の大文字小文字は区別されるので注恿が必要です. URL は 
RFC 1 738で定義されています. 


♦ too, bar, hoeee とは 

無意味な英单語の例です.架空の e - mail アドレスやファイル名を記述するときに用いることがあります. 


♦ RFC (Request for Comments ) とは 

IETF (Internet Engineering Task Force ) によって公開された一連の文 S で.幅広い話題を取り扱ってい 
ます.主な話題は Internet や TCP / IP などの標準化に関するものです.名称こそ「コメントください J です 
が.事実上 IntemeU こおけるさまざまな規約の標準を紹介するものと考えられています.たとえば， 
HTML 2.0 は RFC 1866によって仕様が公開されています. 

原文は InterNIC ( http :// www . internic . net /) が管理しており.無料で入手できます. RFC 文書は各所にミ 
フー（複製保管）されており，たとえば RingServer からも入手できます ( http :// ring . aist . go . jp /, 

http :// ring . nacsis . ac . jp /). 

♦ソースコード，ソースとは 

プログラミングの世界では.プログラム言語で記述したブログラム文章そのものをソースコード（源の暗 
号）とよび.実行できる状態のプログラムと区別します.本書もこれにならい. HTML 文書やスタイルシー 
卜そのものを表示結果と区別したい場合に，ソースコードといろ用語を用いることがあります. 
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注意 

♦バージ ョン 番号を付けずに HTML (HyperText Markup Language) と書いてある埸合 

本書では. HTML 仕様にしたがつて書かれた文書のことは 『 HTML 文書 J と呼称します. HTML と書いた 
場合には.記述の仕様•仕組みを意味しています. 

W 3 C が公開する HTML の仕様には複数のパージョンがあり. 98年7月現在はノ\•ージョン 4.0 が最新 
です. 

本書で HTML と記述した場合は.バージョンによらない一般性質（たとえば••属性は開始タグ内でのみ 
指定する"）に言及しています.もし特定のバージョンに依存する性質に言及する場合は，そのパージョン 
名を明示しています（たとえば “ IMG 要素の A じ T 属性は HTML 4.0 では省略できません"）. 

♦レベル番号を付けずに CSS (Cascading Style Sheet) と書いてある埸合 

本霞では.權築されたスタイルシートは〖スタイルシート j と呼称します. CSS と記述した場合には， 
CSS の仕様 • 仕組みを意味しています. 

W 3 C が公開する CSS の仕様には複数のレベルがあり.今年5月12日のレベル2の勧告によって. 
CSS 1 と CSS 2 とがあります. 

本靄で CSS と記述した場合は，レベルによらない一般性質（たとえば••宣言の露き方"）に言及していま 
す.もし特定のレベルに依存する性質に言及する場合は.そのレベル名を明示しています（たとえば••この 
ブロパテイは CSS 1 では採用されていませんが. CSS 2 で採用されています”）. 
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Introduction to 
CSS wi^tecML 



1 章では，スタイルシートの利点や， HTML との役割分担につ 
いて説明します.同時に，スタイルシートの不在がもたらした 
混乱についても解説します. 



Chapterl Introduction to CSS with HTML 



スタイルシートの 


仕事 



# 1.1.1. 見栄えをコントロールしたい！ 

WWW の標维ファイルである HTML 文害を作成したことのある方ならば，誰もが一度はこ 
んな不満を抱いたことがあると思います. 

「どうして HTML 文窨の見栄えは自由に調整できないのだろう？」 

個人のホームページといっても，大勢の人に公開される作品ですから，その見栄えをきち 
んと コン ト ロールし たいと考えるのは ごく 当然です.そしてその不満は，本#で紹介する 
r スタイルシート J を用いることで解消されます. 

本章では，詳しい解説は後回しにして，まずはスタイルシートの機能を大まかに紹介しま 
しょう. 

# 1.1.2. スタイルシートでできること 

HTM し用のスタイルシートとして W 3 C が推奨しているのが「カスケーデイング•スタイル 
シート ( CSS ) J です.レベル1の CSS ( CSS 1) だけでも，文沓中の任意の部分に関して，以 
下の ブロ パテイ ( property ) ごとにスタイルを調整できます. 


► フオント系 

フォントファミリー，サイズ，太さ，斜体，スモールキヤビタル，行幅 

► 色と背景効果系 

前景色（文字色)，背景色，背景画像の調整 

► テキスト属性系 

単語間隔，文字間隔，下線など，垂直位置（上付き下付き），水平位置揃え（右揃え，左揃 
え），大文字小文字，行頭インデント 

► ボックス系 

マージン•パデイング，ボーダー（枠線） 
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1.1 スタイルシートの仕事一 < 


► 表示位置調整 

表示の横幅，縦幅，フロートと回り込み，回り込みの解除 

► その他の表示調整系 

表示形式，空白の取り扱い，リストマークの調整 

CSS2 では，これらに加えて，「表示位閥の絶対的な指定」「自動生成文字（引用符や通し番 
号）」「印刷への対処」 「TABLE」 「ユーザインタフェース（カーソルやシステムカラーへの参 
照)」「音声再生」に関する指定が可能になっています. 

©1.1.3. HTML 文書とスタイルシートファイルの連携 

スタイルシートはテキストファイルとして作成し，保存しておきます.そのスタイルシー 
卜を利用するには， HTML 文#中に「このスタイルシートを使う」といった指定を （LINK 要 
素として）畨き込めばよいのです. 

WWW ブラウザは，読み込んだ HTM じ文畨にスタイルシートファイルが指定されていると， 
自動的にそのシートを読み込みます.そして，それにしたがって表示を調整するのです. 


リスト 1 #css ファイルの例 

<!DOCTYPE HTML PUBLIC --//W3C//DTD HTML 4.0//EN B > 

<HTML> 

<HEAD> 

<TITLE>HTML4.0 (W3C Recommendation 18-Dec-1997> 解説 </TITLE> 

<LINK REL=-STYLESHEET- TYPE=_text/css_ HREF="normal.css■> 

<LINK REL=■STYLESHEET - TITLE="fancy■ TYPE=_text/css_ HREF=■fancy.css■> 

<LINK REL=-ALTERNATE STYLESHEET - TITLE=■compact■ TYPE= B text/css■ HREF=-small.css■> 
<LINK REL="ALTERNATE STYLESHEET' TITLE=■contact■ TYPE=_text/css■ HREF=-mini.css"> 
</HEAD> 


#1.1.4. 簡単なスタイルシート例 

1) 見出しを調整 

Netscape Navigator や Internet Explorer の標准的な設定では， H1 〜 H6 の要素で指定される「見 
出しのレベル」が下がるにつれて，フォントサイズは順に小さくなります（図 1-1). 




この hi などは通常， < hi > などと r <> j で囲まれたタグと呼ばれる形式で使用されて 
います.詳しい用語の説明は2章で行いますが.（•タグ』とはく H 1> やく/ H 1> といった 
もので，それに挟まれた内容は r 要素』と呼びます. 
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図 1-1. WWW ブラウザ標準の「見出し』 

<H1>1 • ももたろうを考えるく / Hl> 

<H2>1• 1 • 出発まで </H2> 

<H3>1• 1 • 1• はじまりはじまり </H3> 
<H3>1.1.2. 桃太郎の誕生 </H3> 


1•ももたろうを考える 

1.1 .出発まで 

1.1.1 •はじまりはじまり 
1.1. 2.桃太郎の誕生 


これを，スタイルシートを用いて図 1-2 のように変更してみましよう. 


図卜 2. スタイルシートで調整した「見出し』 

Hl{ font-size ： xx-large; }/*Hl をずば抜けて大きく */ 

H2, H3{ font-size: large; }/*H2 と H3 は同じ大きさに */ 

H2 { border-bottom : lpt solid}/*H2 の下にボーダーラインを */ 
H3{ margin-left: 3em; }/*H3 は左に余白を */ 

/* 「 emj は「一文字分」のサイズ傘 / 


1.ももたろうを考える 

1.1 •出発まで_ 

1.1.1 •はじまりはじまり 
1.1. 2.桃太郎の誕生 


このように，ほんの数行のスタイルシートでも，見栄えを大幅に変更できるのです. 

2) 本文を調整 

Netscape Navigator や Internet Explorer の標準的な設定では，段落 （ P 要素）の開始/終了は1行 
分の余白で表現され，行間はぴっちり詰まっています.また，強調部分 （ STRONG 要素）は 
太字で表現されます（図 1-3). 
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1.1 スタイルシートの仕事 


図 1-3. WWW ブラウザ標準の「段落』 

<H3>1.1.1 •はじまりはじまり </H3> 

<P> 桃太郎のお話は，おとぎ話によくあるように，「むかしむかし，あるところに」で始まります . 
おじいさんは山へ柴刈りに，おばあさんは川へ洗 * に行きます . </P> 

<P> ところで，最近の人は「柴 J をご存じでしょうか . 柴とは無関係の生活をしているため， 
<STRONG> I■ 芝刈り J <STRONG> だと誤解している人もいるかもしれません . </P> 



1.1.1 •はじまりはじまり 

桃太郎のお話は，おとぎ話に良くあるように，「むかし 
むかし，あるところに」で始まります。おじいさんは山 
へ柴刈りに，おばあさんは川へ洗*に行きます。 

ところで，最近の人は「柴 J をご存知でしょうか。柴と 
は無関係の生活をしているため， t 芝刈り」だと誤解し 
ている人もいるかもしれません。 


v _ y 

それを，図 1-4 のように変更してみましよう. 


図 1-4. スタイルシートで調整した『段落』 

P{ 

text-indent ： lem ； / •行頭に 1 文字分の字下げ */ 
line-height: 1.5em; /* 行幅は 1.5 文字分 */ 
margin-bottom : Oem ； /* 次の段落との余白は取らない */ 

> 

STRONG { 、白黒反転 */ 

color: white ； 
background: black; 


} 



1.1.1 •はじまりはじまり 

桃太郎のお話は，おとぎ話に良くあるように，「むか 
しむかし，あるところに」で始まります。おじいさんは 
山へ柴刈りに，おばあさんは川へ洗濯に行きます。 


ところで，最近の人は r 柴」をご存知でしょうか。柴 
とは無関係の生活をしているため，だと誤解 
している人もいるかもしれません。 



このように，ちょっとした指定でも，文章の印象を大きく変えられるのです. 
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#1.1.5. どんなことが可能か？ 

これまでの説明で分かるように，スタイルシートを ほんの数 行の記述するだけで，文書全 
体の見栄えを 大きく 変更できます.また，用意されているブロパティを利用すれば，ほぼ自 
在に見栄えを調整できます.ブロパティを複雑に絡み合わせることによって，市販の書籍に 
匹敵するようなスタイル調整が可能です.また， WWW では色や画像を気軽に指定できるの 
で，いろいろな表現を手軽に楽しむこともできます（図 1-5). 


図 1-5. スタイルシート適用例 




/〇ドは今でも AMERICAN HERO か？/ 

n|+> の出;’ XL . fc マペット.トゥナイトを見た • SitlJ rSt^rfuh flnrl Cn^ffiJ^rShp gwph» 
卿 el 〈(5 li )02 曲と，マべ:/卜連が取う「デ U リアス jrLefsGoQazyj だった。 


このように多機能なスタイルシートですが，以下に示すような特殊な表示効果のブロパテ 
ィは用意されていません. 

•段 組， フレーム 
• 文字の回転 

•色のグラデーション制御 

スタイルシートは必ずしも万能ではありません.たとえば，スタイルシートで絵は書けま 
せん.スタイルシートを活用するには，まずスタイルシートで何ができるのか，何ができな 
いのかを知り，その上でそれを活かすスタイル調整を考えるべきでしょう. 
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1.2 HTML にまつわる誤解と混乱の歴史 



HTML にまつわる 
誤解と混乱の歴史 


スタイルシートの活用を考える前に，ちょっと歴史的な経緯を確認したぃと思ぃます. 

©1.2.1. 誤解？ 

これまでに HTML の解説などで「見出しレベルの違ぃは，文字サイズの違ぃに相当する」と 
ぃう説明を見聞きしたことはなぃでしょうか？また， 「 HTML の段落 P 要素は，一行分の改行 
(余 A ) として表示される」とぃう話はどうでしょう.「引用ブロックである BLOCKQUOTE 要素 
は，本文よりも大きなマージンをとって表示される」とぃうのも聞ぃたことがなぃでしょうか- 
すでにお分か りのとおり，これらの表示はスタイルシートによってまったく興なるものに 
変更できます.では，ぃったぃこの説明は何を示してぃるのでしょう？ じつは， 特定の 
WWW ブラウザにおける標啪の表示を説明してぃるに過ぎません. 

HTML の仕様そのものは，各要ぶ•の意味合ぃや役割一見出しであるとか，強調語句であると 
か一を決めてぃるだけで，その表示に関しては（原則として）何も決めて いません. なぜな 
ら，表示はスタイルシートの範疇であり， HTML の範啗ではなぃからです. 

では， HTML の範略とはぃったぃ何なのでしょう. 

# 1.2.2. HTML の仕事の範疇 

(1)SGML の考え方 

スタイル指定に関して，次のことを考えてみてくださぃ. 

❶文字サイズを変えたから，その語句が見出しになったのか？ 

❷ 見出しだと決めたから，文字サイズを変えたのか？ 

通常は❶ではなく❷の方が多ぃでしょう.すなわち，スタイル指定よりも先に，まずは文 
書の構成を明らかにしておくのが普通だと考えられます.❶の場合でも，文字サイズを変え 
るとぃうことは，無意識にその部分を見出しにしようとする意思が伴うことが多ぃとぃうこ 
とです. 
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文書のテキストデータのうち「どこが見出しでどこが本文なのか」を明示するための仕組 
みとして ， SGML (Standard Generalized Markup Language ) があります.この SGML では，見出 
しならば 


<見出し > スタイルシートを使おう！</見出し> 


と，文章に「タグ」と呼ばれる記号をつける（マークアップする）のです. 

このような見出しの指定さえしていれば，あとはスタイルシート側で「見出しはフォント 
サイズ20ポイントで，太字，ゴシック」などと指定するだけで見栄えを調整できます.なか 
なか賢いしくみだと思いませんか？ 

(2) HTML C SGML (HTML は SGML に含まれる） 

SGML の仕組みでは，次の2つの過程によって文#を記述します. 

❶ 文書の様式（文書型定義）を定義する 
❷ 様式にしたがって実際の文 害 を 害く 


文#型定義とは，「これから文邦で指定するのは，“見出し"と“本文”と“強調語句”で 
す」といったことを明示するものです.すなわち，文拽の様式そのものに相当します.しか 
し，毎:间悔问文; 1 !••の様式を定在していては大変です.そこで，文办型定義は使いまわしがき 
くようになっています. 

じつは HTML (HyperText Markup Language ) の正体は，この❶の過程を竹略した SGML なの 
です. HTML における文, 1 }•型定義はすでに定義済みで，われわれはそれにしたがって文?！••を記 
述するのです（このように SGML を活用した文#記述体系を， W 門用語で 「 SGML アブリケ 
ーシ ヨン」といいます）. 

したがって， HTML の fl :4 f の範疇は文, 1 !:の構成を明示することであり，各文典の見栄えに閲 
しては（股則として）何も規定していません.その見栄えに関してはスタイルシートに一任 
されているのです. 


初めから SGML だったのか？ 

最初の HTML および WWW の仕組みは CERN で考え出されました.そのときには， HTML は厳密な 
SGML アブリケーシヨンではなく，もう少しルーズな （？） ものでした. ） レーズであるがゆえに.逆に文8 
記述のルールにあいまいな部分がありました (CREN :ヨーロッパの研究機関. CERN の Tim Berners-Lee 
が90年に WWW という仕組みを発表しました.なお，彼は現在 W 3 C のディレクターとしても活躍してい 
ます). 

しかし，その後の混乱期を経て W 3 C が設立され， W 3 C の努力によって HTML 2.0 以降は明確な SGML 
アブリケーシヨンになりました. 

実際には WWW ブラウザ開発会社などが独自拡張した HTML も存在するのですが，“標準”の HTML と 
いえば， W 3 C が推奨するもの ( W 3 C Recommendation ) を指しています. 
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1.2 HTML にまつわる誤解と混乱の歴史 一く 


®1.2.3. 誤解と混乱の歴史 

(1) スタイルシートの不在 

ところで， WWW が誕生したのは90年， WWW ブラウザ MOSAIC により爆発的に普及し始 
めたのは93年， CSS 1 が発表されたのは96年です.つまり， HTML 文書のスタイル指定は6年 
問（あるいは3年問）放置されていました. 


cm 


実際には考應されていたのですが，橡準化には至りませんでした. 


一般的な感觉からみれば，この期問はそれほど長くはないと言えます.しかし，驚異的な成 
M を見せた www の発逑過程と並べてみれば，“大変長い時問が経った”と感じざるを得ません. 


MOSAIC 

98年にもなると，すでに MOSAIC をご存じないひともいるかもしれません. MOSAIC は世界で最初にイ 
ンライン画像表示を実現した WWW ブラウザで.瞬く間に各種 0S に移植され，93年には事実上の標準 
WWW ブラウザとなりました.その間発者マーク•アンドレセン (Marc Andreessen ) らは NCSA の一興 
でしたが， MOSAIC の著作権について NCSA ともめた結果， NCSA を飛び出し会社を設立しました.それ 
が現在の Netscape Communications Corporation です. 


http: / /www.ncsa.uiuc.edu/SDG/Software/Mosaic/ 

(NCSA : The National Center for Supercomputing Applications :イリノイ大学の内部機関） 


(2) 予期せぬデファクト•スタンダード 

CSS 1 が発表される前も，多くの WWW 利用者が HTML 文#の見栄えを調整したいと考えて 
いました.しかし，はじめに市場の大部分を占めた MOSAIC は， HTML 文#に対するスタイ 
ル変更法を提供しませんでした.その MOS 1 AC が行う HTML 文書の表示は，「見出しレベルの 
違いは文字サイズの違いで表現する」「段落の開始/終了は一行分の余白で表現する」「強調文 
字は太字で表現する」「引用ブロックは本文よりも大きなマージンを取る」といったものでし 
た.その後任である Netscape 社の Netscape Navigator , Microsoft 社の Internet Explorer も， 
MOSAIC が規定した HTML 文#の見栄え設計を受け継ぎ，やはりスタイルを固定的なものと 
して扱ってきました. 

この時期に多くの人が WWW を利用するようになり，当然多くの人が HTML 文書を記述し 
ました.この段階ではまだスタイルシート仕様が確立されておらず，また 「 HTML 文書の表示 
スタイルは，本来自在に変更できるものだ」と言及する人が少なかった（いなかった?）ため， 
いつしか， 「 MOSIAC がそのように表示した」に過ぎなかった表示結果が，あたかも HTML が 
定義する見栄え設定であるかのように理解されました.しかし，それは誤解なのです. 
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この誤解が大きな混乱を生みました.すなわち， 「 HTML は文書の見栄えを指定するもので 
あり，残念ながらその表現力は低い」というイメージが定着しはじめたのです. 


(3) 見栄えを直接指定する独自要素の導入 

その誤解に拍車をかけたのが， Netscape 社など WWW ブラウザ開発会社が 独自に 採用した要 
素（タグ）です.各社は自分の WWW ブラウザが他社のものより高機能であることを示すた 
めに，特殊効果を実現する要素を独自に導入しました.たとえば， FONT 要素を用いれば，文 
逬中の好きな文字のサイズや色を変更できます. BLINK 要素を用いれば，文字列を点滅させ 
られます. MARQUEE 要素を用いれば，電光掲示板のように流れていく文字を簡电に表示で 
きます. 


独自要素を導人すること自体は， WWW をより楽しいものにするという意味で，惡いこと 
ではありません.しかし，これらの要素の多くは，文替構成ではなく「表示のしかた」を指 
定するものでした.このような独自要素が注目されるにつれ， 「 HTML とは文薄の表示結果を 
タグで指定するものだ」というイメー ジがより強まってしまいました. 


いまや，「文字のサイズを変更するには， H 1 〜 H 6 タグを用います」「表示に大きなマージ 
ン をとるには， BLOCKQUOTE タグを用います」と# いて ある市販の本を探すことすら難し 
くありません.しかしこれでは， HTML の本来の考え方が完全にどこかへ吹っ飛んでしまつ 


ています. 

•ヶ.い 

HTML の誤解と混乱の歴史のまとめ 

「見出し』を例に. HTML そのものに関する誤解と混乱の歴史をまとめます. 



本来の「見出し』の表現： 

HTML 「見出し』を見出しタグで囲って明示 

スタイルシート「見出し』を大きな文字に指定 
表示結果 「見出し』は大きな文字で表示される 

誤解と混乱の歴史： 

• スタイルシートが確立していなかった. 

•利用者は，何よりも文窗の見栄えに興味があった. 

• したがって，用意された表現の中から好みのものを探し，利用するしかなかった. 

•本来の「見出し』などの窻味を考えずに. HTML のタグを見栄えの指定道具として考えるようになった. 


誤解と混乱の結果： 

f 大きな文字にしたいときには，見出しタグを用いる J 


こうなると， HTML が文霤構成を示すものだとはなかなか理解できません.しかも， BLINK や 
MARQUEE など一部の独自拡張要素は文 S 構成とは何の関係もありません.ころして， HTML 本来の仕事 
は忘れ去られ，誤解と混乱ばかり力濩延するようになったのです. 
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1.2 HTML にまつわる誤解と混乱の歴史 一 ^ 


# 1.2.4. 怪しいテクニック 

そのような誤解の中で，マークアップを流用して見栄えを調整する「テクニック」が数多 
く生み出されました.もっとも，それは誤解ではなく，スタイル表現を支配したいと苦心し 
た結果なのかもしれません.しかし，どちらにせよそれらが HTML マークアップを混乱させ 
ているのです. 

以下に，代表的な“テクニック”とその問題点を紹介します. 

► 特定のソフトウェアの表示結果に依存（マークアップの無意味化） 

• マージンをとるために，弓 I 用したわけでもないのに BLOCKQUOTE 要素に指定する 
•文字を大きくするために，見出しでなくても見出し要素 （ H 1 〜 H 6 要素）に指定する 
•見出しを作成するために，見出し要素を用いずに， FONT 要素を用いる 
• 大きな改行を得るために無意味に BR 要素を挿入する 


この"テクニック” に従っていると ， HTML マークアップの 本来の目的である「見出しの明 
示」などが統一できません.「見出しとして指定されているのが見出し」という堆純なはずの 
ルールが守られないと，文捭を読むときに見出しがわかりにく くなります. 

また，このように捭かれた HTML 文#では，スタイルシートで見栄えを調整しようにも， 
文押構成が統一されていないために調整できなくなってしまいます. 


► 拡張マークアップの多用（一般性の崩壊） 

• 「文字列を点滅させる」 . BLINK 

• 「文字列を中央寄せ表示する」 . CENTER 

• 「画面を分割して複数の HTML 文書を同時に表示する」 . FRAME 

• 「 HTML 文書上に独立したパネルを作成する」 . LAYER 

• 「文字をスクロール表示する J . MARQUEE 


これらの要素を利用すれば，その WWW ブラウザを利用している人たちには美しい効果と 
して解釈されるでしよう.しかし，それ以外の WWW ブラウザを利用している人はどうなる 
のでしよう？この方法では，一部の人にしか効果をアピールできません. 


@ipi> 


独自拡張が後に W 3 C に採用されるケースもあります.たとえば ， FONT • CENTER • 
TABLE はもともとは Netscape 社の独自拡張要素でしたが， HTML 3.2 で採用されまし 
た. FRAME は HTML 4.0 で採用されました. 
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► すべてを画像として表現 

一般に，影付き文字や会社のロゴマークのような特殊な装飾つきの文字は，テキストでは 
なく画像として HTML 文書に貼り込みます.この極端な例として，文章全体を両像にして公 
開しているケースに遭遇することがあります.つまり，独自の DTP ソフトウェアなどを用い 
て整形した結果のスクリーン シヨッ トでホームページを構成するのです. 

たしかに，これならばソフトウェアに依存せずに，表示を完全に支配できます.しかし， 
次のような欠点があります. 

•データサイズが増大し，転送に時間がかかる 
• 文害内のテキストを検索するなどの文字処理が不可能 

•画像を表示できない人には，まったく情報が伝えられない（文字情報のみを表示する WWW 
ブラウザや音声読み上げ式 VWVW ブラウザなどにとっては致命的） 


► すべてを TABLE として表現 

TABLE の本来の意味は 「表」 ですが，表のコマ (CELL) の位瑕を「文字の位骰」として利 
用し，細かなレイアウトを実現した文押も存在します.中でも，上下左右のマージンや，語 
句同士の位趵閲係を調整する効果を狙ったものが多く見られます. 

この“テクニック”の设大の難点は，「指定が難しい」ことです.複雑なレイアウトを実現 
しようとすればするほど， HTML 文抖のソースは複雑になります.すると，專用ソフトウェア 
(A •機能の WYSIWYG の HTML エディタなど）を用いなければ思ったとおりの効:•を得るのは 
雛しいといえます. 

もうひとつ雒点があるとすれば，処理に必要な時間です.複雑なレイアウトの TABLE を調 
幣するには，当然それなりの処理時問が必要です.結果として文書の表示にかかる時間が埘 
大するでしょう.これはコンピュータの処理速度に依存する問題ですが，読者をイライラさ 
せる可能性が萵いことは問違いありません. 




TABLE は HTML 3.2 から正式採用されているものの.対応していない WWW ブラウザも 
いまだ活躍しているという事実もお伝えしておきます. 
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1.3 混乱から抜け出すために 



混乱から抜け出す 
ために 


©1.3.1. 意識の転換 

「どうしてマージンをとるために BLOCKQUOTE (引用ブロック）なんていう名前の要素 
を使うのだろう.どうしてちょっと余白を取りたいだけなのに，テーブルだのセルだのを考え 
なければならないのだろう. HTML って難しい.これじゃあ，"気軽に WWW で文書公開”な 
んて無理だなあ.」 


こう考えてしまうのはもっともです.しかし，それは「本来 HTML にはできないこと」を 
無理やり HTML で行おうとしていたのがまずかったのです. 

HTML でスタイルを調幣しようとするのを止めましよう. HTML 文, 1 !•を本来の文造••構成を 
明示するためのものに戻しましょう.そして，スタイルシートを使いましよう. 

# 1.3.2. スタイルシートを使う利点 

1.2.5 .で紹介した怪しいテクニックを用いる場合とは異なり，スタイルシートを用いた見栄 
え綢整には以ドのような利点があります.このことを逆に考えてみると， HTML で見栄えを指 
定することがいかに「無理のある仕事」であったのかを実感できると思います. 


(1) シートの記述しやすさ 
♦テキストファイル 

CSS 仕様のスタイルシートはテキストファイルとして記述されるため，スタイルシート作成 
のために特別なソフトウエアを用意する必要はありません. 

♦直感的なキーワード指定 

簡単なキーワードを記述するだけで，文字サイズや色•マージン•インデント.行幅など 
を自在に設定できます.マージンならば [ margin : 3 cm 】， フォントサイズならば [ font - size : 13 pt 】 な 
ど，直感的な英単語を利用するため学習も容易です.また，画面サイズなどに合わせた相対 
指定も可能です. 
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♦指定効果の汎用性の確保 

指定の効果は仕様書に明示されているため，どのソフトウェアに対しても同様の効果を期 
待できます. 


♦データサイズの 軽量 化 

“継承 （ inheritance )” という仕組みを上手に活用すれば，少しの指定でも全体のスタイルを 
調整できます. 

(2) HTML 文書との相性の良さ 
♦ HTML 文書とスタイル指定の分離 

HTML 文#から独立した仕組みでスタイルを指定するため， HTML 文禆がすっきりと分かり 
やすいものになります. 


♦スタイルシートの再利用 

ひとつのスタイルシートを複数の HTM じ文逬から利用することが可能です.また，スタイ 
ルシートの中に別の既存のスタイルシートを取り入れる （ import ) ことも可能です. 

♦非対応ソフトウェアへの考慮 

スタイル指定が HTML 文押から分離しているため，対応していない WWW ブラウザは，「ス 
タイルシートと HTML 文を受け取ったとしても，単に HTM じ文#だけを処理できます. 
したがって，スタイルシート非対応ソフトウェアを用いている人にも支障なく文®■•内容を伝 
達できます. 

♦ 読者の都合にあわせたスタイル調整 

カスケーディングという仕組みによって，読者独自のスタイルシートを持ち込み，表示を 
綢整することも可能です.そもそも，読者はスタイルシート機能をオフにすることもできま 
す.このように，スタイルシートを用いた HTML 文#は，読み手の都合にあわせて柔軟に変 
化させられます. 


♦スタイルシートの選択肢の提供 

HTM じ文害そのものを書き直さなくても，別のスタイルシートに付け替えるだけで，見栄え 
を大きく変更できます.また，1つの HTML 文書にあらかじめ複数のシートを指定しておき， 
読者に好みのシートを選択してもらうようなプレゼンテーションも可能です（図1-6，1-7, 
1 - 8 ). 
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混乱から抜け出すために 





狭太》のお tf は.おとざ a に炱くあるように， r むかしむ 
かし.あるところに J で始まります。おじいさんは山へ柒別 
りに，おばあさんは川へ洗; II に行きます。 

ところで.最近の人は 「 ttJ をご存知でしょうか* tt とは 
爱«疼の生活をしているため.「芝刈り』だと»«している 
人もいるかもしれません • 

「 tt 刈り J «, 咳を取るために.お* IS をたくために.あ 
るいは他の0的のために«れ«を相ってくることです 。 r 
资 j は衿定の « tt ではなく，«木 • w 木《全胶を格して使わ 
れるのが薈 ii です。 
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図 1-8. スタイルシートを適用した例 2 


1 . ももたろうを考える 

1 1 . 1 . 出発まで 


11 . 1 . はじまリはじまリ 


挾太》のお访は.おとざ达に A くあるように，「むか 
しむかし.あるところに J で始まります。おじいさんは 
山へ》刈りに.おばあさんは川へ洗濯に行#ます。 

ところで，最近の人は 「« J をご存知でし*うか〇 » 
とは， W 係の生活をしているため.「芝刈り J だと 
している人もいるかもしれません* 

「 tt 刈り J は， IS を取るために.お JR 呂をたくため 
に.あるいは他の a 的のために«れ枝を相ってくること 
です。 「 ttj は鴇定の榭はなく，«木 ■ »木 M 金姣 
を指して ffb れるのが til です • 


1 . 1 . 2 . 桃太郎の B 生 
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1.4 本書の薦める学習手順一< 



本書の薦める 
学習手順 


_ 1.4.1. 本書の構成と学習手順 

本齊は， CSS を用いた HTM じ文杏のスタイル調整を解説するものです.単に CSS の仕様を 
紹介するにとどまらず，スタイル指定の考え方にまで言及します. 

しかし，スタイルシートを活用するには， HTML 文抑が文,*?構成を示すものとして#かれて 
いる必要があります（端的に言えば， HTML 文#から見栄え指定を剥#し，見栄えをスタイル 
シートに押し込む哗備をしなければいけません.そうすることによって， HTML 文漭はより軍 
純で明快なものになります）.そのためには，まず HTM じ本来の仕様を理解し，必要に応じて 
誤解を解かなければなりません.そこで，本:种は以下のような怫成になりました. 

♦ 2章 ： tutorial of HTML as SGML 

2 穿では， HTML 文#の本来の役割一文#の惝成を明示すること一に関して，いったん 
SGML に立ち返って解説します. 

♦ 3章 ： some more HTML 

3穿では，もう少しだけ HTML に関する取り決めを説明します. 


♦ 4章 ： CSS syntax in detail 

4牮では， CSS によるスタイルシート記述の文法的な側面を解説します. 

♦ 5章 : CSS properties for visual media in detail 

5 章では， CSS が規定する個々のブロパティのうち，中心的に用いられる visual メディア用 
のブロパティを解説します. 

♦ 6章 ： road to mastering CSS 

6 章では，実際にスタイルシートを構築する上で重要になる概念や，無理の無いシートにす 
るための「考え方」を紹介します. 

♦ 7章 ： new feature in CSS 2 

7章では，新たに CSS 2 で導入された「印刷」 「 TABLE 」 「音声再生」などのためのプロパテ 
イを解説します. 
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なお，この章の並びは筆者の考える望ましい学習ルートに過ぎず，絶対ではありません. 
興味に応じて，お好きな章から読み始めても構いません.ただし，後の章は前の章の知識を 
前提にしていますので，分からない単語や概念が現れましたら，必要に応じて前の章をお読 
みください. 

©1.4.2. 巻末資料について 

巻末に， HTML 4.0 と CSS 2 のクイックリファレンスを資料として収録しました. HTML 4.0 や 
CSS のすベてのキーワードを暗記する必要はありません.クイックリファレンスを机の脇に置 
き，活用してくださることを願います. 

他にも，98年5月段階での各種 WWW ブラウザのスタイルシートサボート状況を収録しま 
したので，ぜひご利用ください. 

@ 1.4.3. 動作確認について 

本畨は，特定の実装結果（ソフトウェアの動作結果）ではなく，仕様をもとに HTML や 
CSS を解説します.しかし，現実的には仕様と実装に食い違いがあるものです.すなわち， 
( I :様にはあるが機能しない概念，仕様とは異なった結果になるスタイル指定例などが存在し 
ます. 

そこで，本せ}••では代表的な WWW ブラウザである Netscape Navigator 4.0 と Internet Explorer 4.0 
における実装と仕様との食い違いを必要に応じて報箝します.ただし，筆者の都合で， 
Windovvs 95 におけるテストしか行えませんでした. Mac や各穐 UNIX をお使いの方，あるいは 
他の WWW ブラウザを用いている方はあらかじめその旨をご了承くださるようお願い申し上 
げます. 

また， WWW ブラウザの厳密なバージヨンを薄けば ， Netscape Navigator 4. 04 ， Internet 
Explorer 4.00です.執來段階での Ai •新バージョンは Netscape Nagivator 4.05, Internet Explorer 4.01 
ですが，これらはマイナーチェンジ（であるはず）なので，大きな違いはないものとさせて 
いただきます. 

©1.4.4. WWW によるサボートと例ソース公開について 

本書の6章で紹介するスタイル例は，すべて WWW で入手可能です. 

http://www.gihyo.co.jp/css/ 


を参照してください. 


28 



tutoria_f HTML 
as 


2 章では， HTML 文書の本来の役割一文書の構成を明示する 
こと一に関して，いったん SGML に立ち返って解説します•す 
でに HTML に関して知識のある方は読み飛ばしても構いません 
が，知識を整理し，場合によっては誤解を解くために，ぜひ2 
章をお読みください. 



Chapter 2 tutorial of HTML as SGML 



SGML in brief 


HTML の概念を正しく把握するためには， SGML に関する基礎知識が有用です.この節では， 
SGML に関する基礎知識を「名刺」を題材に説明します. 

©2.1.1. 文書型定義と文書インスタンス 

(1) 「名刺』と「名刺の定義 J 

名刺とは，個人の名前や連絡先を印刷した簡単な文海です.それぞれに印刷されてぃる文 
面は違ぃますが， そのフォーマツトはだいたい同じです. 細かぃ違ぃを思ぃ切って無視して 
しまえば， r 名刺とは，府办きの紹介，名前の紹介，連絡先の紹介などで構成されてぃるもの j 
と定義できるでしょう （図 2-1). 

SGML 的には，「名刺」を説明するには2つの段階を踏みます.すなわち，「名刺の定義」と 
「その定義にしたがって#かれた個々の名刺」をもって「名刺」を説明します.「名刺の定義」は 
「屑戡き，名前，連絡先からなるもの」であり，「その定義に従った個々の文#」を「名刺」と呼 
ぶのです.あえて専門用語を用ぃれば，前者を 「文書型定義 （Document Type Definition : DTD )」 
といい，後者を 「文書インスタンス （Instance :実例)」もしくは単に「文割と呼びます. 


図 2-1. 「名刺 J と丨名刺の定義 J 


〇〇商事営業部 

円山幸雄 

tel 052-123-4567 


△△美術館館長 


平山稔 


tel 03-9876-5432 
fax 03-9876-5431 


所属 


姓名 


連絡先 



2.1 SGML in brief ぺ 


文書型定義は，そのまま「文書の書き方の規則」になっています.おかしなたとえですが， 
銀行や役所で初めて必要#類を書く場合でも， 備え付けの r 記入例』を見れば 正しく記入で 
きるのと同様に，まだ「名刺」を作ったことのない人でも， 「名刺の文書型定義 J を見れば， 
必ず正し V 、様式で記述できるのです. 

SGML の考え方では，まず誰かが「文書型定義」を作成し，皆がそのルールにしたがって文 
错■•インスタンスを記述します.こうすることによって，「誰が書いても」同じルールにしたが 
って整えられた文害を記述できます. 

ということは，すべての人が（少なくとも） 文書型定義の読み方を理解している必要が あ 
ります. 

以降では，実際に「名刺」の文杏型定義を作業する課程と，文#型定義にしたがって文搿 
インスタンスを迸く課程を紹介することで， SGML に関する理解を深めたいと思います. 




事実として. HTML の仕様 S でも.前半で文遘型定義の読み方を紹介しています. 


(2) 「文書型定義』が定める用件 

文押沏定義は，次の用件を定義するものです. 


• どんな構成要素があるのか 
•要素の出現順序，出現回数 
• 要素の親子関係 


文及•型定義では，まずその文卉を構成するパーツ（要素： Element ) にどんなものがあるの 
かを明示しなければいけません.「名刺」の例では，「肩沓き」「姓名」「連絡先」が構成要素 
です. 

加えて，その各要濃がどのような順番で何回出現するのかを定義すれば，文#型定義はほ 
ぼ完成です.ここでは，出現順序は「府邦き」「姓名」「連絡先」の順だと定義し，その出現 
回数は「肩遊き」は0以上（ I つも/ pI # きのない人もいるし，複数の佾畓きをもつ人もいる）， 
「姓名」は1(姓名のない名刺は困る），「速絡先」は1以上 （ fri •低でも丨つは連絡先が必要）で 
ある，と定義します. 

この垛合は，文押型定義は次のように, 1 !:かれます. 

<! ELEMENT 名刺--(肩害き•，姓名，連絡先+> > 

<!- [解説] 

順序：肩害き，姓名，連絡先の順 
回数：0以上 （*>, 1，1以上 （+ ) 
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ao く!--から—〉 の間は ， 文窖型定義における“コメント”です. 

ところで， SGML では，ある要素は別の要素の集合として定義されています.ある要素を 
「親要素」と見た場合，それを構成している下位の要素を「子要素」と呼びます.さて，さき 
ほどの文書型定義は最上位の要素「名刺」を定義したに過ぎません.続いてその子要素であ 
る「肩書き」「姓名」「連絡先」の文齊型定義を記述しましょう. 

<! ELEMENT 肩香き-- (# PCDATA ) > 

<! ELEMENT 姓石—— (# PCDATA ) > 

<! ELEMENT 連絡先-- (# PCDATA ) > 


ここで/•要素として現れた 「# PCDATA 」 は， SGMUH 語で「普通の文字」をさします•端 
的には， # PCDATA は目に見える（表示される）文字そのものです.全ての要素の子（孫）要 
素として# PCDATA が現れたところで，その文押の定義は終了です.すなわち， # PCDATA が 
現れてようやく本当に文■•が記述できるわけです. 

以上で「名刺」の文逬型定義は完成しました（図 2-2). 必要な知識はこれだけです. 


図 2-2. 「名刺』の文 8 型 定義 （ nomal ) 

<! -- 文書型 定義 「名刺」 (http://www.meisi.com/dtd/nomal.dtd)-- > 
<! ELEMENT 名刺 -- (屑書き*， 姓名， 連絡先> 

<!- 【解説】 

順序： 屑害き， 姓名，連絡先の 順 
回数： 0 以上（ *) ， 1 ， 1 以上 （+ > 

-- > 

<! ELEMENT 肩 香き-- (# PCDATA ) > 

<! ELEMENT 姓名 -- (# PCDATA ) > 

<! ELEMENT 連絡先 -- (# PCDATA ) > 




厳密には.各要素のとりうる"属性 （ Attribute )” に関しても定義が必要です.本窗は 
SGML そのものの解説霱ではありませんので，あえて省略します. 


(3) 文書インスタンスの書き方 

それでは，実際に文書型定義にしたがって「名刺」インスタンスを記述してみましょう. 
文#インスタンスでは，タグ （ tag ) と呼ばれる記号を用いて要素を表現します.すなわち， 
「開始タグ < 要素名 >」と「終了タグ々要素名 >」で挟むことで，その要素が記述されている範 
囲を特定するのです. 


<要素名> 要素の内容</要素名> 
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図 2-2 の 文書型定義によれば， もっとも最上位の要素は「名刺」です.したがって，文書イ 
ンスタンスの最も外側は次のようになります. 

<名刺> 

</名刺> 


つづいて， 文書型 定義で「名刺」の子要素について 調べると， 「肩書き」 （0 回以上)，「姓名」 
(1 回），「速絡先」 （1 回以上）を書くことになっています.その定義にしたがって，「名刺」の 
内容としてこれらを記述しましょう（ここでは，すべての子要尜を丨回ずつ#いてみました）. 


<名刺> 

<肩書き> </屑害き> 
<姓名> </姓名> 

<連絡先> </連絡先> 
</名刺> 


「肩迸き」「姓名」「連絡先」の子要素は， # PCDATA すなわち普通の文字です.そこに実際 
の W # きなどを押き入れれば，妓終的な「名刺」インスタンスのでき上がりです（図 2-3). 


図 2-3. SGML 文窗インスタンスとしての「名刺』 


<名刺> 

<屑害き >〇〇商事営業部</屑害き> 

<姓名 > 円山幸雄</妓名> 

<連絡先 >tel 052-123-4567</連絡先> 
</名剌> 


<名刺> 

<屑香き >△ △美術館館長 </屑書き> 

<姓名 > 平山稔</姓名> 

<連絡先 >tel 03-9876-5432</連絡先> 
<連絡先〉 fax 03-9876-5431 </連絡先> 
</名刺> 


△△美術館館長 


平山稔 


tel 03-9876-5432 
fax 03-9876-5431 


〇〇商事営業部 

円山幸雄 

tel 052-123-4567 


r タグ』#「要素』 

「タグ』は「要素の開始や終了を明示する記号 j に過ぎません.しかし，『タグ』という用語を『要素そ 
のもの _i と混同して用いているケースをよく見かけます.たとえば， r スタイルシートで hi タグの見栄え 
を調整する j といった表現です.く hi > タグそのものは表示されないのですから.この表現は変です.ここ 
はあくまでも「要素の見栄えを調整する』のです. 
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(4) HTML の場合 

以上のように， SGML では，文書を書くためにまず文書型定義を書き，その定義にしたがっ 
て文書インスタンスを書く必要がありました.一方 HTML は，はじめから文書型定義が定義 
されています.したがって，利用者は文書型定義に関して悩む必要はありません.ただ単純 
に， 与えられた文書型定義を理解し， それにしたがって文書インスタンスを記述すればよい 
のです. 

本#の HTML 解説では， W 3 C の定める正規の文甚型定義を整理.単純化したものを用いま 
す.これを用いれば，すぐに HTML 文書インスタンスを記述できるようになるでしょう. 


SGML 宣言について 

本当に SGML アブリケーシヨンを構築するには，文書型定義とともに. SGML 宣言と呼ばれる一連の宣 
言書が必要になります. SGML 宣言は，間始タグの記号は何にするのか，アルファペットの大文字小文字は 
区別するのか，などの取り決めを担当しています.とはいえ，多くの塌合 SGML 宣言は標準指定されてい 
るものを用い.独自の修正（間始タグを r #+ +# J , 終了タグを f #- 十# J とする.など）は行いません. 
そのため，本靨では SGML 宣言の解説は省略します. 


#2.1.2. スタイルシートの位置づけ 

(1) スタイルシートの仕事 

ところで，文, 1 ！••型定義だけでは，文外の性格は分かっても Jii •終的な印刷結果は分かりませ 
ん.見栄えの指定は，スタイルシートという別の仕組みで行います （ SGML とスタイルシート 
はまったく独立した仕組みです.原理的にはスタイルシート以外のスタイル指定方法を採用 
しても構いませんが，ここでは簡単のためにスタイルシートだけを紹介します）. 

スタイルシートは，文#型定義で取り上げた要素ひとつひとつに関して，フォントサイズ 
や色などを指定していくものです.スタイルシートは文齊インスタンスごとに切り替えられ 
るので，文咨型定義が同じでも，異なった見栄えの文沓を作成することが可能です（図 2-4). 



図 2-4. スタイル シー トの例 


2.1 SGML in brief —{ 


〇〇商嗷営窠部 

円山幸雄 


tel 052-123-4567 


△△ X 術航館 ii 
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tel 03-9876-5432 
fax 03-9876-5431 
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(2) HTML の埸合 

以上のように， SGML では文#作成者が別途スタイルシートを記述しない限り，表示に関し 
ては完全に不明のままです.—方， W 3 C が HTML 用に推奨する Cascading Style Sheet ( CSS ) 
の tt 紐みでは， [ WWW ブラウザ」「文 i 1 ! ■•作成者」「読者」の3者がスタイルシートを持ちよる 
ことを前提にしています.すなわち，文 in ••作成若がスタイルシートを省略しても WWW ブラ 
ウザが適切に文#を整形して表示してくれます.もちろん，スタイルシートを用いれば，自 
在に見栄えを調整できます. 

#2.1.3. バージヨン違いの表現 

(1) パージヨン違いとは 

図 2-2 で「名刺」の文書型定義を提示しましたが，それは名刺の定義の 一例に 過ぎません. 
現実的には さまざまな種類の名刺の 定義が考えられます.たとえば，「肩書きは必ず1つ以上 
記述しなければならない」「連絡先は TEL か FAX のどちらかでなければならない」などのバリ 
エーシヨンが考えられます.そのような違いを「バージョン違い」といいます. 

異なるバージョンを表現するには， 異なる文書型定義が 必要です. 図 2-2 の文書型定義を 
nomal . dtd とし，ここでは新たに variation . dtd を記述してみましょう （図 2-5). 
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図 2-5. 「名刺』の文書型定義のバージヨン違い 

く！ -- 文害型定義「名刺」 ( http :// www . meisi . com / dtd / variation . dtd )-- > 

<! ELEMENT 名刺--(肩書き +， 姓名，連絡先） > 

<!-- [解説] 

顧序：肩害き，姓名，連絡先の順 
回数：1以上 （ + ), 1，1 

-- > 

<! ELEMENT 肩害き-- (#PCDATA) > 

<! ELEMENT 姓名-- (#PCDATA> > 

<! ELEMENT 連絡先-- (TEL I FAX) + > 

<!-- [解説】 

順序： TEL あるいは FAX どちらか一方，の 1 回以上の繰り返し 
回数：1，の1回以上の繰り返し 

-- > 

<! ELEMENT TEL - - (#PCDATA) > 

<! ELEMENT FAX - - (#PCDATA) > 

文#型定義 variation . chd にしたがってインスタンスを办いてみましょう（図 2-6). 


図 2-6. variation . dtd による文 S インスタンス 


<名刺> 

<屑書き>△△美術館館長</屑香き> 

<姓名 > 平山稔</姓名> 

<速絡先> 

< TEL>tel 03-9876-5432</ TEL > 
< FAX>fax 03-9876-5431 </ FAX > 
</ 連絡先 > 

</ 名刺 > 


△△美術館館長 

平山稔 


tel 03-9876-5432 
fax 03-9876-5431 


(2) D0CTYPE 宣言 

図 2-6 の文博インスタンスを解釈するためには，どの文杏型定義を読めばよいでしょうか. 
もちろん， variation . dtd です.誤って nomal . dtd で解釈してしまうと，要素 「 TEL 」「 FAX 」 が理 
解できずに困ることになります. 

文及を解釈する上で読者を混乱させるのは望ましくありません.その混乱を避けるために， 
おのおのの文迸インスタンスの敁初の 丨 行に，それが どの文書型定義にしたがって書かれて 
いるの かを明示する宣言一 DOCTYPE 宣言（文害型宣言）一を記述しましょう. 

DOCTYPE 宣言は，一般に次の形式を取ります. 

< ! DOCTYPE 定義名 SYSTEM あるいは PUBLIC ■ DTD ファイルの位置 ■> 

なお， SYSTEM は非公開（ローカル ） DTD (文書型定義）を， PUBLIC は公開 DTD を意味 
します.これまでの文書インスタンスに DOCTYPE 宣言を加えると 図 2-7 のようになります. 
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図 2-7. DOCTYPE 宣言付きの文書インスタンス 

<! DOCTYPE 名刺 SYSTEM " http ： //\^ ww.meisi . com / dtd/nomal . dtd "> 
< 名刺 > 

< 肩 害き >△△美術館館長</肩 害き> 

<姓名 > 平山稔</姓名> 

< 連絡先 >tel 03-9876-5432 く/連絡先 > 

< 連絡先 〉 fax 03-9876- 5431</連絡先 > 

</名刺> 


<! DOCTYPE 名刺 SYSTEM "http://www.meisi.com/dtd/variation.dtd"> 
<名刺> 

<肩害き>△△美術館館長</屑害き> 

<姓名 > 平山稔</姓名> 

<連絡先> 

<TEL>tel 03-9876-5432</TEL> 

<FAX>fax 03-9876-5431 く/ FAX> 

</連絡先> 

</名刺> 




廠密には.バージヨン違いの存在にかかわらず. SGML の文 S インスタンスには 
DOCTYPE 宣言の記述が「必須』です. DOCTYPE 宣言がなければ，読者はそもそも f 名 


刺」なのか fHTMLJ なのかを判断できません. HTML 文篇を8 く上でも，同様に 


DOCTYPE 宣言が必須です. 


(3) HTML の場合 

98年 -3 月現在，公式に認められている HTML のバージョンには 2.0, 3.2, 4.0 があります. 


♦ 




曼 HTML ? •〇丄 J 95 年ユ2月， RFC 1866】 

<! DOCTYPE HTML PUBLIC "-// IETF//DTD HTML // EN "〉 
あるいは 

<! DOCTYPE HTML PUBLIC "-// IETF//DTD HTML 2.0// EN "〉 


文畓構造，インライン i 由 i 像，リンクなど，もっとも基本的な HTML 文書を定義しています. 
なお， HTML 1.0 に相当する公式の仕様は 存在しません. すなわち， HTML 2.0 成立以前は公式 
の文書型定義が定められておらず， HTML 文書の記述ルールにかなりの混乱がありました（厳 
密には， HTML 2.0 にはサブバージョンがあり，それに応じて複数の文書型定義と DOCTYPE 
宣言が存在します.詳しくは RFC 1866 をご参照ください). 
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HTML 3.2 は， Netscape 社などの独自仕様の要素 （ TABLE ， FONT など）や独自属性 
( BGCOLOR , ALIGN など）を HTML 2.0 に追加したものだとおおざっぱに説明できます. 

なお， HTML 3.2 よりも前に， HTML 2.0 を大幅に拡張する HTML 3.0 が検討されたのですが， 
そのギヤッブの大きさ (?) のために 3.0 は破棄されました. 



HTML 3.2 では FONT 要素など，直接にスタイルを規定する要素が採用されました.しかし， 
SGML 的な観点からぃえば，文戡構成要素は文鹆における意味（「肩齊き」「連絡先」など）に 
基づぃて定義されるべきであり， FONT 要素などは 望ましくない ものです.しかし，すでにデ 
ファクト-スタンダードとして広まってぃる以上，これらを無視するわけにはぃきません. 

そこで， HTML 4.0 では Strict ， Transitional , Frameset のサブバージョンが制定されました. 

Strict は FONT 要素などのスタイル規定系要素.诚性を破棄した厳密なバージョン， 
Transitional はスタイル規定系要素 • 城性を残したバージョンです. Frameset は毛色が異な 
り，フレーム表示の HTML 文軎に使われる特別な文書型定義です.なお， Transitional (過渡的） 
とぃう名前が示すとおり，今後は Strict に移行することが勘案されてぃます.スタイル指定は 
スタイルシートで行ぃましよう. 

HTML 4.0 の新基軸としては，文書の国際化考慮.スタイルシートとの連携.マルチメディ 
アオブジェクト•スクリプト •フレームの 採用があげられます.また，テーブル， フォーム 
の 表現力がより豊かになりました.さらに，アクセス性に関する考慮（マウスを用ぃなぃ読 
者，画像を表示しない読者にも文書内容を伝えるための考慮）のための属性が追加されてい 
ます. 
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^ip§> 


より具体的なアクセス性の確保に関しては， W 3 C 内部に Web Accessibility Initiative 
( WAI ) という機関が設けられ，指針の草案を検討中です ( http :// www . w 3. org / WAI /). 


国際化考慮について 

厳密には， HTML 2.0 や 3.2 の仕様は西欧言語のアルファペットの文字コードを対象にしており.その他 
の言語圈一日本語やへブライ語など-•を考慮したものになっていません.すなわち，属性値などに日本語文 
字を用いてよいと言い切れないところがあるのです（注：もっとも，各種 WWW ブラウザの実装は別です. 
日本語対応をうたう WWW ブラウザであれば， HTML 2.0 で日本語を用いていても難なく表示してのけるで 
しょぅ). 

HTML 4.0 では仕様として.はじめから国際化を考應しています.すなわち， HTML 4.0 にしたがった 
HTML 文 S では.気兼ねなく HTML 文窗で日本語を使えます. 

実は， HTML 2.0 を国際化対応に拡張した仕様も存在しました. 

♦ HTML 2. X 【97年1月， RFC 2070】 

<!DOCTYPE HTML PUBLIC •-// IETF//DTD HTML il 8 n // EN "> 




i 18 n : internationalization の略です. i で始まつて，18文字あつて， n で終わ 
るから i 18 n です） 


本■では国際化に関する具体的な解説は省略します. 


(4) バージヨン間の互換性について 

HTML のバージヨンは上位互換では ありません. したがって， HTML 2.0 の仕様に則って# 
いていた文 V l j ••インスタンスの DOCTYPE 宣言を 4.0 に付け替えても， HTML 4.0 の文#として通 
用するとは限りません. 

また，新しいバージヨンが 絶対ではありません. すなわち， HTML 4.0 で FONT 要素が破粢 
されたからといって， HTML 3.2 として#かれた文#で FONT 要素を使えなくなったわけでは 
ありません（もっとも，あまり望ましくはありませんが). 

HTM じ 文#作成者は，どのバージヨンの文書型定義にしたがって HTML 文書を記述しても 
構いません.ただし，必ず相当する DOCTYPE 宣言をつけてください. 
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DOCTYPE 宣言に関する誤解 

「 DOCTYPE 宣言をつけるように J と声高に叫ばれ始めたのは， HTML 3.2 が制定されたころです.しか 
し，説明が不十分な場合が多く， 『 HTML 文書を靄く場合は，必ず. 

<! DOCTYPE HTML PUBLIC B -//W3C//DTD HTML 3.2 //EN"> 

と頭につけておくよラに J といろ説明すら存在しました. 

実際には，記述した HTML のバージヨンに応じて正しい DOCTYPE 宣言を記述しなければいけません. 
たとえば， HTML 2.0 の仕様にしたがって蠢いた HTML 文8であれば， HTML 2.0 の DOCTYPE 宣言を記述 
してください. 

また， BLINK 要素や MARQUEE 要素は WWW ブラウザ開発会社の独自拡張要素です.これらを用いた 
HTML 文 S は，公式の仕様にのつとつた HTML 文 B ではありません.したがつて，上に挙げた DOCTYPE 
宣言を記述するのは誤りです.どのような DOCTYPE 宣言を書くべきかは， Microsoft 社や Netscape 社に 
間いてください AA ;). 


以上で，必要な予備知識はすべて解説しました.「らくらくカンタン」ではないものの，思 
つたよりは雜しくなかったのではないでしょうか. 
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HTML as SGML 
in brief 


続いて， HTML の解説を，その文, 1 !:定義をもとに行います. 

©2.2.1. HTML の文書型定義（簡略版） 

本, 1 !:は HTML 4.0 -Strict をベースに，文々記述のコア部分だけを取り出した文， 1 }••型定義を用い 
て HTML を解説します.本, 1 !••の指示にしたがって, 1 !••かれた HTML インスタンスは，必ず 
HTML 4.0 -Strict の仆様を満足しますので， 4.0 -Strict の DOCTYPE 穴 i i •を記述してかまいません. 

► HTML 文 害 （ HTML 要素そのもの）は HEAD 要橐と BODY 要素で 構成されます. HEAD 要 
素は 前書き， BODY 要素は本文に相当します. 

► HEAD 要素は TITLE 要 粟で構成されます. TITLE 要素は文害のタイトルに相当し， 
#PCDATA です. 

► body 要素は，1つ以上の r ブロック系要素 J の繰り返しです.ブロック系要素は自然言語 
の「段落」に相当するもので，その要素の開始•終了で表示が改行されます. 

► 「ブロック系要素」は， # PCDATA か r インライン系要累 J の繰り返しです.インライン 
系要素は，ブロック内部の特別な単語（強調したい単語など）などを示咳する要素です. 

► 「インライン系要素」は， # PCDATA か「インライン系要累 J の繰り返しです.すなわち， 
インライン系要素の内側に別のインライン系要素を入れ込むことが可能です. 


以上をまとめると，まず前書きがあって，続いて本文がきます.本文は段落の繰り返しで 
す.段落は，普通の語句と強調したい語句などの繰り返しです.さて，その文宵型定義は次 
のように単純なものです（図 2-8). 
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図 2-8. HTML 4.0 の文書型定義（簡略版） 

% —— 


• HTML 4.0 のサブセット. 

インスタンスは HTML 4.0- Strict と DOCTYPE 宣言して構わない 
<! DOCTYPE HTML PUBLIC B -// W 3 C//DTD HTML 4.0// EN "> 


!— 最上位の要素は 「 HTML 」--> 

! ELEMENT HTML O O ( HEAD , BODY ) 
!-- [解脱】 

順序： HEAD , BODY の順 回数： 


<!ELEMENT HEAD 〇 o ( TITLE ) > 

<!ELEMENT BODY O O (% ブロック系要素；） + > 

<! — 

回数：1以上 （+ > 

-- > 

<!— この％付きの「名前 J は，「要紊のグループ J の名前であり， 
HTML 文害中にはそのグループ内の要素を記述する. 

C 言語の# define マクロ展開に似ている. 

具体的な要素は，本文中で紹介する. 


<! ELEMENT TITLE • - (# PCDATA )> 

<! ELEMENT %ブロック系要索；-- ( %インライン系要素；）+ > 
<! -- 

回数：1以上（ + > 


<! ELEMENT %インライン系要素；-- (# PCDATA | %インライン系要素；）+ > 
<!-- [解説] 

順序： # PCDATA あるいは％インライン系要素；のどちらか一方， 

の1回以上の繰り返し 
回数：1,の1回以上の繰り返し 

-- > 


本当は「％ブロック系要素；」と「％インライン系要素； J の 
実体を定義する必要があるのだが，ここでは省略する. 





2.2 HTML as SGML in brief ベ 


SGML では，要素を再帰的（入れ子的）に定義できます.すなわち.「インライン系要素 J 
の子要素に再び丨インライン系要素 j が現れても構いません. 

馨)2.2.2•ブロック（段落）を組み上げる 

文書型定義によれば， HTML 文書インスタンスは前書き （ HEAD 要素）と本文 （ BODY 要 
素）に分けられます.そして，本文 （ BODY 要素）はブロック系要素の繰り返しです•した 
がって， HTML 文書を# くには，まず HEAD • BODY • 「ブロック」を組み上げることにな 
ります. 


<HTML> 

<HEAD> 

<TITLE> title</TITLE> 
</HEAD> 

<BODY> 

</BODY> 

</HTML> 


ブロックは「段落」に相当するようなもので，表示の約束として，その要素の開始と終了 
で「改行」されます（これは， HTML 仕様が表示結果に踏み込んでいる数少ない例です.もつ 
とも， HTML 4.0 では「一般的には改行される」というような表現に改められています.なお， 
実際に改行するかどうかはスタイルシートで再定義できます). 

基本のブロック系要素は「見出し （ Heading )」 と「段落 （ Paragraph )」 の2種類です.「見出 
し」は見出しレペルに応じてく H 1></ H 1>，< H 2 x / H 2>, … < H 6 x / H 6> の6棟類の要素として 
記述します（ごくまれに H 7 要素があると紹介されることがありますが， W 3 C の仕様では存在 
しませんのであしからず).段落は < Px / P > と記述します. 
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ここでブロック開始•終了以外における「改行』が気になるかもしれませんが，通常は文 
字列が画面の端に達したところで自動的に折り返されるので， f 改行指定 j を意識する必 


要はありません. 


<! ELEMENT (HI I H 2 IH 3 IH 4 I H 5 I H 6) - - (% インライン糸要索；>+ > 
<! ELEMENT P - 〇 (%インライン系要素；} + > 


<! DOCTYPE HTML PUBLIC "-// W 3 C//DTD HTML 4.0// EN B > 

< HTML > 

< HEAD > 

< TITLE > 「おとぎ話を考える」 </ TITLE 〉 

</ HEAD > 

< BODY > 

< H 1>1. ももたろうを考える </ Hl > 

< H 2>1•1• 出発まで </ H 2> 

< H 3>1.1.1 •はじまりはじまり </ H 3> 

< P > 桃太郎のお話は，おとぎ話によくあるように，「むかしむかし，あるところに」で始まります. 
おじいさんは山へ柴刈りに，おばあさんは川へ洗*に行きます. </ P > 

< P > ところで，最近の人は「柴 J をご存じでしょうか.柴とは無関係の生活をしているため， 
「芝刈り」だと誤解している人もいるかもしれません. </ P > 

< H 3>1.1.2. 桃太郎の誕生 </ H 3> 

< P > 桃から生まれたので，桃太郎.なんて®単なネーミングでしょう. 

しかし，この觴明さこそが名前の本質を表わしています. •••くほ> 

</ BODY > 

</ HTML > 


ありがちな誤解 

見出し要素に関するもっと多い誤解として. 「 Hx 要素は文字のサイズを指定する J といろものがありま 
す.また，一歩正解に近づいたものの間違つているのは「見出し文字のサイズを指定する J という説明です. 
正しくは.「見出しレベルを指定する j です.表示のサイズはスタイルシートで自在に変更できます. 

p 要素に関するもつとも多い誤解は， rp は2行改行する j です.また，その誤解の源になっている誤解 
は fP には終了タグはなく，改行したいところに付ける』というものです.じつは， HTML 2.0 成立以前に 
は， P 要素には終了タグがありませんでした.でも.それは昔のことです.現在は，段落の開始と終了を指 
定するように変更されています.また.改行幅一実際には「下の余白』一はスタイルシートで自在に変 
更できます • 
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r 見出しレべノレ j とは 


見出しには大見出し.中見出し，小見出しといったレベルの違いがあります.別の表現をすれば，部- 
章•節•項などの階層になります.本書では， n , 2, 3』といった最上位の見出し（第1レベルの見出し） 

と，その中にある ri . l . 1.2, 1.3 J といった下位の見出し（第2レベルの見出し），门.1.1, 1.1.2, 

1.1.3 J といった更に下位の見出し（第3レペルの見出し）があります. 

HTML では，第1レペルの見出しは H 1 要素で表現します.第2レベルは H 2, 第3は H 3 であり，順に 
H 6 まで用意されています. 

< H 1>1 •ももたろうを考えるく/ Hl > 

< H 2>1.1 •出発まで </ H 2> 

< H 3>1• 1 • 1•はじまりはじまり </ H 3> 

< H 3>1.1.2. 桃太郎の誕生 </ H 3> 

< H 2>1• 2 • 鬼が島へ </ H 2> 

< H 3>1• 2 . 1 • 旅の仲間 </ H 3> 

HTML の文法には，見出しの順序や付け方の制限はありません.しかし，通常はレベル1の見出しの次に 
レベル3の見出しがくるのはおかしなことだと思われます._ 

基本的な文#作成に必要な知識は，以上ですべてです.本当はまだ別のブロック系要濃を 
紹介したいのですが，それは3牮にまわします. 


©2.2.3. インライン装飾をする 



(1 )STRONG 要素 

インライン系袈尜は，ブロック内部の 文章の一部を装飾するための 要素です.まずは，そ 
の代表格である STRONG 要素を紹介します. STRONG 要素は，強調したい部分を明示するた 
めに用います. 

例として，次のような段落を考えます. 

< P > 私の誕生日は2月24日です.ひろのみやさんの翌日です. </ P > 

もし，この文章で「2月24日」を強調したいのであれば，その部分を（ただの P 要素ではな 

く） STRONG 要素として 設定します. 

< P > 私の誕生日は < STR 0 NG >2 月 24 日 </ STR 0 NG > です. 
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ひろのみやさんの翌日です. </ p > 

こうすると， WWW ブラウザや読者はこの部分を強調するべき語句（単語）だと理解でき 
るようになります. 

ほかにも強調したい語句（単語）があれば，それも STRONG 要素として記述しましょう. 


< P > 私の誕生日は < STR 0 NG >2 月24日 </ STRONG > です. 

< STRONG > ひろのみやく/ STRONG 〉 さんの翌日です. </ P > 

なお，すべてのブロック系要素の内部にインライン系要素を記述できます.すなわち，見 
出しの中に STRONG 要素を配置することも可能です. 


< H 1>< STR 0 NG >® 生日 </ STRONG > (こつし、て </ Hl > 


< P > 私の誕生日は < STR 0 NG >2 月24日 </ STRONG > です. 
< STRONG > ひろのみや </ STRONG > さんの翌日です. </ P > 


文章を咨いたときに心の中で「2月24日は強調したい」と思っても， 思っただけでは 読者 
も WWW ブラウザもそれを理解することはできません.必ず 明示 してください. 


(2) CLASS 属性の設定 

もし，それぞれの STRONG 要素で強調する理由が違うのならば， その理由を 明示したほう 
が文牽表現がいかになります. HTML の場分，そのような遠ぃの表現を CLASS W 性 ( Attribute ) 
の指定で行ぃます（「妬性」に関する詳しぃ説明は3車で行ぃますが，さしあたって開始タグ 
の中に < 要素名属性名1="値"属性名2="値"> などと記述するのだと思ってくださぃ.なお， 
終了タグには何も書きません). 

< P > 私の誕生日は <STRONG CLASS = M DATE ">2 月24日 </ STRONG > です. 

〈STRONG CLASS =，， NAME "> ひろのみや </ STRONG > さんの翌日です.く/ P > 

CLASS 厲性は，その名のとおり，個々の要素の 所属するクラス（分類） を示すものです. 
この例では， DATE (日付）クラスと NAME (名前）クラスを用ぃました.クラス名はあらか 
じめ用意されてぃるわけではなく，文畲記述者が任意に規定します. 

ちなみに，スタイルシートを用ぃれば，要素の表示方法をクラス毎に設定できます.同じ 
STRONG 要素でも， 「 DATE 」 は斜体， 「 NAME 」 は 太字，とぃうように表示結果を指定変えら 
れるのです.したがって，適切にクラス属性を設定しておけば，より表現力豊かな文書にな 
ります. 


< P > 払の誕生日は く STRONG CLASS : " DATE " >2月24日 </ STRONG > です. 
< STR 0 NG CLASS = M NAME M > ひろのみや く/ STRONG > さんの翌日です. 

弟の誕生日は く STRONG CLASS = " DATE '>4 月28日 く/ STRONG 〉 で， 
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こちらは 〈STRONG CLASS =” NAME "> ひろひと天皇く/ STRONG 〉 の前日. </P> 

<P> しかも，"ににんがし”と“しにがはち”です. 

嘘っぽいけど，本当の誕生日です. </P> 


^ipi> 


CLASS 属性は， STRONG 要素だけでなく BODY 要素を構成するほぼすベての要素に指 
定できます.もちろん. P 要素や H1 要素にも指定可能です. 


クラス名の付け方 

クラス名は r 文章中での意味』に基づいて付けることが重要です.もし，期待するスタイノレ効果に基づ 
いたクラス名 rREDJ rBIGJ などを採用すると，文 s 構成にとっては何の意味も無いばかりか，顥終的に 
は HTML 内にスタイルを埋め込んだのと同じようにマークアップが混乱してしまいます.“大きくしたい" 
などの見栄え指定はスタイルシートに任せましよう. HTML 文痛には.見栄えを変える根拠（人名だから. 
など）を記述しましよう. 




クラス名に使える文字 

クラス名として使える文字にとくに制限はありませんが，基本的には半角英数字のみで書いてください. 
『!"#%&」などの記号は他の用途で使われることが決まっているので.避けたほうが無難でしよラ.また， 
日本語も避けましよろ. 

なお，クラス名はスペースで区切って複数記述することが可能です.すなわち. 

<STRONG CLASS= - SPECIAL DAY - >2 月 24 日 </STRONG> 

という記述は.この要素が 「SPECIAL』 クラスかつ rDAVJ クラスに所属していることをあらわします. 
逆に言えば，スペースは文法的に予約された記号なので，クラス名には使えません. 

なお，アンダースコアし）は使用可能です.次の例は， rSPECIAL_DAYJ という1つのクラス名として 
解釈されます. 

<STRONG CLASS= ■ SPECIAL.DAY - >2 月 24 日 </STRONG> 


(3) その他のインライン系要素 

もう少しインライン系要素を紹介します（表 2-1). 
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表 2-1. さらなるインライン系要素 




Q 

引用語句 (quotation). 

坂本竜馬日く. <Q> 『日本の夜明けは… j </Q> 

CITE 

引用もとの記事や本のタイトル. 

先月の く CITE 〉 rSoftware MagazineJ く / CITE 〉 には… 

SUB 

下付き文字 （subscript). 

C0 く SUB CLASS="times">2 く / SUB> 

SUP 

上付き文字 （superscript), 
e = me く SUP CLASS= ,, power , * >2</SUP> 


この中に望みの要素が用意されていない場合は， SPAN 要素を用ぃて擬似的に表現してく 
ださぃ. SPAN 要素は意味の決められてぃなぃインライン系要素で， CLASS 厲性によっての 
み意味を伝達します.ただし SPAN 要素は，スタイルシートで指定しなぃ限り見栄えの変化 
を起こしません. 

<HlxSPAN CLASS=*number >1 .</SPAN> はじめに </Hl> 

<H2xSPAN CLASS='number *>1.1 .</SPAN> 背景 </H2> 

以上で，よく使われるインライン系要素はすべて紹介しました.なお，特殊な効果を生む 
インライン系要素として IMG (インライン両像： Image ), A (アンカー： Anchor ), BR (改 
行： LineBreak ) があります.これらに閲しては3章で解説します. 


スタイノレ規定に関する要素に関して 

すでに HTML をご存じのかたは，フオントのサイズや色を指定する FONT 要素を知っていると思います. 
しかし， HTML 4.0 -Strict では FONT 要素は®棄されました.なぜなら，そのような指定はスタイルシート 
で行ろべきだからです. HTML 文 S インスタンス内部には文霱の論理的な構成のみを記述し.見栄えはスタ 
イルシートに分離するようにしましよう. 


なお. HTML 4.0 -Strict でも B 要素（太字) • I 要素（斜体）などのスタイル規定系要素は採用されていま 
す.しかし，本書ではこれらもスタイルシート側で指定すべきだとして，あえて紹介しません.たとえは， 
太字にする理由が「強調』であれば STRONG 要素を用いるべきですし.理由が「引用タイトルであれば 
CITE 要素を用いるべきです.これは WAI ( http :// www . w 3 c . org / WAI /) も示唆している考え方です. 

HTML 文 S を霤く際には.次のように考えていただけると幸いです. 


• HTML は，原則として文霱檇成を明示するものであり，スタイルを匱に示唆するもの 
は排除したほ5がよい. 

• 現に，3.2で採用されたスタイル閡連の要橐は HTML 4.0- Strict では破棄された. 
•例外的に，まだいくつかスタイル問連の要*が残っているが，使わないほうがよい. 


また， BLINK 要素 • MARQUEE 要素などの rWWW ブラウザ会社による独自拡張要素 j の中には強力な 
見栄え効果を提供するものがありますが，これらの利用もお勧めできません. 
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スタイノレ規定に関する属性に関して 

HTML 3.2 では，いくつかのスタイ;レ規定のための属性が採用されました.これらのうち，よく使われて 
いるものの. HTML 4.0- Strict で破棄されたものを表 2-2 に挙げます. 

表 2-2. HTML 4.0- Strict で破棄されたスタイノ定に関する属性 





ALIGN 

水平位匾そろえ 

HI - H 6. P , HR 

ALIGN 

フロート指定 

IMG 

ALIGN 

垂直位蔺そろえ 

IMG 

BACKGROUND 

背景画像 

BODY 

BGCOLOR 

背景色 

BODY 

TEXT 

一般文字色 

BODY 

LINK 

未リンクのアンカー文字色 

BODY 

VLINK 

既リンクのアンカー文字色 

BODY 

ALINK 

指示最中のアンカー文字色 

BODY 

SIZE 

HR 要素では.縦の幅 

HR 

WIDTH 

HR 要素では，横の幅 

HR 

NOSHADE 

HR 要素では，非立体表示 

HR 


f 同じ ALIGN という属性名がこれだけ多岐にわたる機能に対して使いまわされている j という事実から 
も，この属性の混乱ぶりがうかがえるような気がします. 

ちなみに.これらの機能はスタイルシートを用いれば，より高度に実現できます.たとえば， 「 H 1 〜 H 6 
と P で異なる文字色にする j 「リンク状態の違いを背*色とフォントファミリーの違いで表現する J などが 
可能です. 

しかし，「スタイルシート非対応 WWW ブラウザのためにこれらの属性を残したい j かもしれません.そ 
のような埸合は. HTML 3.2 か 4.0- Transitional の文霱型定義にしたがってください.なお，本窗の提示す 
る文齧型定義にこれらの属性を付け足したものは， 4.0- Transitional の仕様を满足します. 

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN B > 
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Check Your HTML 
Document 


誰が文章を書いてもほ，その中には何らかの間違いが潜んでいるものです.単なる打ち間 
違いもあれば，文法の誤解によるミスもあるかもしれません. WWW で公開する文害は人の 
目に触れる文章ですから，公開前に間違いを取り除く努力をするべきです.ここでは ， HTML 
のマークアップ上のミスと，それを探し出す文法チェッカーを紹介します. 

© 2 . 3 . 1 . どんなミスがありえるか 

(1) 单なる打ち間違い 
► STRONG を STRING と打ってしまっていた！ 

► 終了タグのつもりで開始タグを害いていた！ 


(2 ) 親子関係の間違い 

►インライン系要素を，ブロックを超えて記述していた！ 

不正なインライン系 要素： _ _ 

<STRONG> 

<P> 僕はビートルズが好きです . </P> 

<P> しかし，ビートルズならばなんでもよいかといえば，そうでもありません . </P> 
</STRONG> 


正しいインライン系要素： 

く PxSTRONG> 僕はビー トルズが好きです . </STRONGx/P> 
<PxSTRONG> しかし，ビートルズならばなんでもよいかといえば , 
そうでもありません . </STRONGx/P> 


► TITLE 要素を BODY 要素の中に書いていた（正しくは HEAD 要素の中に書く） 

►リストにおける LI 要素をリストコンテナ （ UL ，0 L ) の外に書いてしまった！（リストに関 
しては3章を参照） 
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(3) 要素の入れ子の間違い 
► 子要素が閉じる前に親要素が閉じてしまった 

これは，インライン系要素を人れ子にしているときにありがちです. 


不正な例： 

< p > 林業白害によれば， 

< STRONGxQ > 日本の森林率（面積割合）は67パーセント</ STRONG 〉 で， 
世界でもトップレベルの森林保有国に位置づけられています </ Q >. </ P > 


正しい入れ子横造： 

< P > 林業白害によれば， 

< QxSTRONG > 日本の森林率（面積割合）は67パーセント</ STRONG 〉 で, 
世界でもトップレベルの森林保有国に位置づけられています </ Q >. </ P > 


(4) 順序，回数の間違い 

► BODY 要素を何度も害いてしまった （ HEAD , BODY は1度ずつしか害けません） 

► HEAD 要素に直に文字 （# PCDATA ) を害いてしまった （ HEAD の子要素に# PCDATA はあ 
りません） 

►リスト項目 （ LI 要素）のないリストコンテナ （ UL ，0 L ) を作ってしまった（リストコンテ 
ナの子要素として， LI 要素はひとつ以上必要です） 




HTML の文8型定義では.順序•回数を制限される要素はごくわずかしかありません.そ 
のせいか.順序 • 回数には制限があることを知らない人もいるよろです. 


(5) DOCTYPE 宣言の付け間違い 

► BGCOLOR 属性を使っているのに， HTML 4.0- Strict だと宣言してしまった 

► BLINK 要素など独自拡張要素を使っているのに， W 3 C の HTML だと宣言してしまった 
► そもそも DOCTYPE 宣言を付け忘れている 

©2.3.2. 文法チェッカーの紹介 

Netscape Navigator , Internet Explorer などの WWW ブラウザは， HTML 文書の文法が間違って 
いても「ェラーだ」などと簧告してはくれません.それどころか，ミスの存在を黙認して （?) 
何とか表示してくれます.すなわち，よほど重大なミスが存在しない限り， HTM じ文書は何 
とか表示されるものなのです（エラー処理の方法は， WWW ブラウザによって異なります）. 
しかし，「文法が間違った HTM じ文書を書いてもよい」わけではありません. WWW といえ 
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ども人の目に触れるものとして文書を公開するのですから，礼儀として文法的なェラーは取 
り除いておくのが「義務」だと言えるでしょう. 

HTML 文書の文法をチェックするソフトウェアは複数存在しますので，これらを利用して間 
違いを見つけるとよいでしょう.ここでは， WWW で利用できるものを紹介します. 

♦ Weblint/jweblint 

http://saturn.aichi-u.ac.jp/ mimasa/jwebLint/ 

Neil Bowers 氏が作成したチェッカ ー. Masayasu Ishikawa 氏が日本語化したものを作成して 
います （Masayasu Ishikawa 氏は W 3 C のメンバーです）. 

Weblint は，文法チェッカーというよりも作法チェッカーです.すなわち，「望ましくないマ 
ークアップになっていないか」をチェックしてくれます.しかし，一部の文法的ミスを見逃 
してしまいます. 


♦ Another HTML-lint 

http :// ring . aist . go . jp / openlab / k 16/ htmll 1 nt / htmllint.html 
kl 6 氏が Weblint に触発されて作成した文法チヱッカー. Weblint とは異なり，文#型定義に 
基づいた厳密な文法チェックを行います.间時に作法チェックを行い，なんと採点までして 
くれます.もっとも，得点はあくまでも参考ですので気をつけて. 

Another HTMLIin 丨の「チェック内容の解説」を読むと， HTML の作法について大変勉強にな 
ります.丨度目を通してみるとよいでしょう. 
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3 章では，もう少しだけ HTML に関する取り決めを説明しま 
す.しかし，スタイルシート記述にとっては本章の内容は「余 
談 J です.すでに HTML に詳しい方や早く CSS について知り 
たい方は，読み飛ばしてもかまいません. 













Chapter 3 some more HTML 



some more rules 
as SGML 


#3.1.1. タグ記述ルール 

(1) 開始タグ•終了タグの省略できる要素 

HTML では，基本的にはすべての要素において「開始タグ」と「終了タグ」を 明確に 記述 
しなければいけません.しかし，その開始や終了が明確である場合で，かつ文畨型定義が許 
可している要素に限り，開始タグや終了タグの記述を将略できます.なお，文将沏定義にお 
ける要素名の直後の2つの記号が「饩略の可•不可」を示しています （図 3-1). 

2聿で紹介した要素では， BODY 要素と HEAD 要素が「開始タグ」も「終了タグ」も省略可 
能です.また， P 要素は「終了タグ」のみ省略可能です.逆に，それ以外の要素のタグはすべ 
て明示する必要があります. 


図 3-1. 文窗型定義におけるタグ省略の可不可の提示 


<!ELEMENT P - 〇 (%インライン系要素;)+ 


IT P - 〇 (% 

A 


終了タグに閣して 


開始タグに w して 


省略不可 

省略可（文脈でその開始 / 終了が明確な壜合） 


【注】〇はアルファぺットのオーで， omit の頭文字です. 


文書型定義で「省略可」となっていても，無条件にタグを省略できるわけではありません. 
タグの省略が許されるのは， 要素の開始や終了が明確である場合 だけです. 
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► 開始タグが省略できるケース 
•順序から見てその要素の開始が明確なとき 

• その親要素の開始が明確で，かつ順序的にその要素しかありえないとき 

( HTML 要素の次には HEAD 要素しか書けないため， HTML 要素の開始タグの直後には 
HEAD 要素の開始タグがくることは明確） 

• その直前の要素の終了が明確で，かつ順序的にその要素しかありえないとき 
( HEAD 要素の終了タグがあれば，そこで BODY 要素が始まることは明確） 


► 終了タグが省略できるケース 

• 順序的にその要素の終了が明確なとき 

• 自分の下位要素でない要素の開始タグが現れるとき 

( HEAD 要素には P や H 1 は害けないので，これらが現われれば HEAD の終了は明確•もち 
ろん， BODY が開始すれば HEAD の終了は明確） 

• 自分の親要素の終了タグが現れるとき 

( BODY 中の最後の P は， BODY の終了タグがあれば P の終了は明確） 

このようなケースであれば， WWW ブラウザは機械的に「薄かれていないけれど，本当は 
ある」と判断して処理を続けられます.だからこそ省略が許されるのです. 

したがつて WWW ブラウザは， </ P > のある文章もない文章も同じように表示するはずで 
す.にもかかわらず.実際には表示結果が異なる埸合があります.これは WWW ブラウ 
ザ側の実装ミスです. 
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r タグ』省略の指針 

筆者は，あまりタグを 省略し ないことを お勧めします.たとえば， HTML • HEAD • BODY 要素の 
開始タグ•終了タグを省略すると，文鼉構成が分かりにくくなるので望ましくないと思います.あえて使用 
してもよい「この場合だったら間違いなく省略してよい J ケースは.以下の2つのような埸合です. 

- P 要素の終了タグは，その直後に 次の P 要素の開始タグがくる 場合のみ.省略してもよい. 

• U 要素の子要素がインライン系 要素 だけの場合.その LI 要素の終了タグは省略してもよい. 

< P >* 近忙しぃので，害きたぃことがたまってぃる.たまりすぎて，忘れちゃぃそう. 

< P > 忘れると困るので，タイトルだけでも害きとめておこう </ P > 

< UL > 

< LI > 

< P>Java 関連 く/ P > 

< UL > 

< LI > Java 思想と Java 言語， JavaVM の関係 
< LI > 理想はどこまで実装されてぃるか 
< LI > Sun は絶対正義なのか 

</ UL > 

</ LI > 

< LI > PRINCE 音楽の構成学的な見地からの評価 
< LI > Netscape 社だ って 必ずしも正義ではない 
< LI > IE を人に奨める際の注意事項 
</ UL > 

もちろん，本当はもっと多くのケースで省略 A 河能です.しかし. 簞 者は「省略しない』ことをお勧めし 
ます (UL, LI 要素に関しては 3.2.1 .を参照). 


(2) 空要素 

先ほどはタグを竹略できる場合を紹介しましたが，実は「終了タグを省略しなければなら 
ない（教いてはいけない)」よう指定されている要素も存在します.それらは，後に紹介する 
IMG 要求⑽像）など，文字•以外のものを表現する要素であり，「空要素 (Empty Element ) J 
と呼ばれます.空要桌は開始タグのみを記述します.文#型定義では，空要素の子要素は 
「( EMPTY )」 と沓かれています（図 3-2). 




厳密には，カツコは冗長です.しかし，本霱は見やすさのためにカツコを追加しています. 


;-2.文軎型定義における空要素の提示 

[ELEMENT IMG - 〇 ( EMPTY ) > 

! ELEMENT BR - 〇 ( EMPTY ) > 
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(3) 属性の記述 

属性 ( Attribute ) とは，要素に与えられる付加的な情報のことで，開始タグの中に記述しま 
す.終了タグには属性に関する情報は記述しません.属性値はクオーテーシヨン•マークで 
囲みます.普通はダブル•クオーテーシヨン（•… ） を用いますが，シングル•クオーテーシヨ 
ン（”）でもかまいません. 


<要素名属性1=•属性値 • 属性2=•属性値_>文字列</要素名> 


各要桌が持っている W 性は文#型定義で定義されています. 

なお， HTML 文押の場合，诚性指定はあくまでも付加的な位阀づけになっており，ほとん 
どの诚性指定が省略" J * 能です.また，いくつかの诚性は見栄え調整のためのものであり， 
SGML 的には望ましくありません.したがって，やみくもにすべての W 性を覚えることは得策 
ではありません. 

そこで本,》!:では，朽略イぐ町の诚性と CLASS 诚性など必要诚低限のものに限って紹介します. 


属性値の簡略記述法 

たくさんの HTML 文靨を■いていると.属性値を囲む""付けがめんどうになることがあります . HTML 
では.以下の埸合には省略してよいことになつています. 



クォーテーションマークの省略： 

値が ra - z , A - Z . 0-9. -(ハイフン） 
省略した例，できない例： 

<HR SIZE =5 WITDH =-100%-> 

<P ALIGN = LEFT >〜</ P > 


. (ピリオド)』のみからなる塌合 




HTML 4.0 の SGML 宣言が正しければ， 4.0 からは.さらに卜』 [: J が含まれて 
いても省略できるはずです.しかし，仕様«の解説では，互換性確保のためか， 
r-j r：j については言及されていません. 


また，属性値が1つしか規定されていない属性 （ HR の NOSHADE 属性など）に関しては.属性名の記 
述を省略できます （4.0 までの HTML に限って言えば，このような埸合は属性名と属性値が同一にされてお 
り.見た目には属性名を省略したのか属性値を省略したのか区別できません). 

<HR NOSHADE > 




現実的には，「省略するのが標準 j と考えられるよろです.一部の WWW ブラウ 
ザは，“正式”な記述であるはずのく HR NOSHADE =" NOSHADE "> を「エラー』 
とするかもしれません. 


なお，このコラムで紹介した SIZE . WIDTH , ALIGN , NOSHADE 属性はすべて見栄え調整のための属性 
です. HTML 3.2 で採用されたものの. HTML 4.0- Strict では破棄されました. 
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(4) 大文字 • 小文字および全角半角 

タグ内部の要素名•属性名を記述するアルファべットの大文字，小文字は区別されません. 
ただし，必ず半角英数字を用いなければいけません.記号 「く」「</」「>」「=」「""」「"」 およ 
び空白に関しても半角英数字を用いてください. 




実際の文章一すなわち # PCDATA —中に，日本語の空白として r 全角の空白 j を用 
いるのは大丈夫です.ここで禁止したのは.タグ内部など. HTML が定める記号を a く部 
分における使用です. 


©3.1.2. 実体参照に関して 

記号「く」「>」「</」はタグを普くために予約されているため， HTML 文害のソースには（夕 
グ以外の用途では）記述できません.ほかにもいくつか記述できない記号があるのですが， 
これらの記号であっても，「実体参照 (entity reference )] と呼ばれる一種の別名を用いれば記 
述できます （ C 言語の# define マクロ展開に似ています）. 

実体参照は「& (アンド)」に始まり，「实体名」を薄き，「；（七ミコロン）」に終わります. 
なお，実体名は大文字小文字が区別されるので注意が必要です. 

実体参照も文孜型定義で定義されています（表 3-1). 


表 ^1. よく使われる実体参照 


:記述 

表示 

備考 

& amp ; 

& 

ampersand の略 

& lt ; 

< 

less than の 略 

& gt ; 

> 

greater than の 略 

& quot ; 

_ 

quotation マークの 略 


(fiN) 


r/j は直接記述できます. ただし， f く/ 1 は終了タグとしてしか記述できません. 


® 3.1.3 •区切り文字（スペース，タブ，改行）に関して 

HTML 文書内部では，単語の区切り文字としてスペース • タブおよび改行を利用します 
(ただし，日本語文字の空白は区切り文字ではありません). 

区切り文字をソース中に何個連続して記述しても，読解時にはひとつの区切りとしてのみ 
処理されます.すなわち，次の2つのソースは同一の内容を表現しており，表示結果は同じに 
なります. 
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<H1>1 . ももたろうを考えるく/ Hl> 

<H2>1• 1 • 出発まで </H2> 

<H3>1•1•1 •はじまりはじまり </H3> 

<P> 桃太郎のお話は，おとぎ話によくあるように，「むかしむかし，あるところに」で始まります. 
おじいさんは山へ柴刈りに，おばあさんは川へ洗潘に行きます. </P> 


<H1>1 . ももたろうを考えるく/ Hl> 

く H2>1• 1 • 出発まで </H2> 

<H3>1.1.1 •はじまりはじまり </H3> 

<P> 桃太郎のお話は，おとぎ話によくあるように， 

「むかしむかし，あるところに」で始まります. 

おじいさんは山へ柴刈りに，おばあさんは川へ洗*に行きます. </P> 

HTML 交•押のソースでは，ソースとして見やすいように（表示に気がねせず）空白や改行を 
揷入してかまいません. 

©3.1.4. コメントアウト 

HTML 义种のソースを読む人（ときには自分自身）のために，コメントを “ WWW ブラウザ 
が表示できない形で”記述したいことがたまにあります.しかし， HTML の仕組み自体にはコ 
メント 様式が ⑴ 意されておらず， SGML で文咨型宣言を, 申く 際のコメン ト ァウトの捭式を流用 
しています. 

文害型定義は「<!」と「>」の間に書かれます,この中の「-」(ハイフン2つ）「-•」で囲ま 
れた部分は，コメントァウトされたものとして通常の処理から除外されます. 

<!- 次のリンクは，作成者に連絡して許可をもらった--> 

<PxA HREF="http ： //www. foo.bar.jp/people/ks"> すみけんリ ソース !</A></P> 

i つの「く!」と r > j の間に複数のコメントを記述することもできますが，コメントはあく 
までも「--」が対になっていなければいけません（コメント中にはハイフンを記述しないのが 
最も安全でしょう）. 


正しいコメントアウトの様式： 

<卜-リンク--作成者に連絡して許可をもらった--> 
不正なコメントアウトの梯式： 

<卜-リンク„作成者に連絡して許可をもらった--> 
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コメント中の関始タグ • 終了タグ 


一部の WWW ブラウザは.コメント中に終了タグがあるとそこでコメントが終了したと勘違いする，と 
いわれています.なお ， Netscape Navigator 4.0 <t Internet Explorer 4.0 は正しくコメントアウトを解釈し 
ました. 

一部の WWW ブラウザは，このコメントの解釈を失敗する： 


次のリンクは，まだ未許可のためコメントアウトしておく. 
<PxA HREF = ■ http : / / www . f 〇〇 . bar . jp / people / ks / ■ > 
すみけんリソース！ </ Ax / P > 







ック系要素を紹介します.なお，本本書の文書型定義は 
ことをお忘れなく. 


UL や 0 L は内部に LI しか記述できない. 

LI は UL や 0 L の直下のみに記述できる. 

LI の終了タグは場合によっては省略できる. 


LI の子要素は，インライン系要素 1 つかブロ ッ ク系要素 1 つ以上. 


3.2.1. ブロックを含みろるブロック系要素 

ここでは，子要素としてブロック系要素を含む要素を紹介します.これらの要素によって, 
より複雑な文侪惝造を表現できます. 

(1) リスト （ UL , 0 L ) 


ELEMENT UL - - ( LI )+ > 


- ( LI )+ > 

〇 (%インライン系要素 ； I %ブロック系要素；+> > 


ENTITY % ブロック系要素 

■ UL I OL I BLOCKQUOTE | DIV I HR | 

HI I H 2 I H 3 I H 4 I H 5 I H 6 I P I ADDRESS I PRE ■> 


jEMENT 

EMENT 


し （Unordered List ) 要素は箇条書きリス 
ます（図 3-3). 


し (Ordered List ) 要素は数え上げリス 
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図 3-3. リスト 
箇条書きリスト （ UL ) 
• りんご 
•ごりら 
• らっぱ 


数え上げリスト （ OL > 
1•りんご 
2•ごりら 
3 • らっぱ 


UL , OL の中には,項目に相当する LI (List Item ) 要素だけが記述できます. LI 要素の中に 
は任意のブロック系要素もインライン系要素も記述できます.したがって， LI の中にさらに 
リストを作成することも可能です（図 3-4). 

LI は， UL あるいは OL の直の子要素としてのみ記述可能です.このことには十分注意し 
J てください. 


図 3-4. リストの入れ子 
< P > 「果物リスト」 </ P > 

< UL > 

< LI > 

< P > みかん </ P > 

< OL > 

< LI > 三ヶ日みかん </ LI > 
< LI > 四日市みかん </ LI > 
</ OL > 

</ LI > 

< LI > 

< P > なし </ P > 

< OL > 

<乙1>二+世紀なし </ LI > 
< LI > 幸水 </ LI > 

</0 L > 

</ LI > 

</ UL > 

「果物リスト」 

• みかん 

1. 三ヶ日みかん 

2. 四日市みかん 
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•なし 

1. 二十世紀なし 

2. 幸水 


物 S ) 


HTML3.2 以前では， LI の中に見出しやアドレスを記述できませんでした. HTML 4.0 か 
らは文法的には可能ですが，互換性のために記述しない方がよいでしよろ. 


(2) 引用ブロック （ BLOCKQUOTE) 



HTML 文#内にほかの弗辂などからの引用を記述する場合， BLOCKQUOTE 要素として記述 
します. BLOCKQUOTE 要素内には任意のブロック系要素が記述できます.なお，2章で紹介 
した Q 要素は，ブロック系要素 （ P 要素など）内部に引用語句を入れ込む場合に用います. 
BLOCKQUOTE 要素はブロックごと引用する場合に用います. 


< PxCITE > 日本ユニテック SGML サロン (1995) はじめての SGML : 285 pp ， 技術評論社，東京都 
</ CITE > の11ページ < Q >1 章： SGML への誘い </ Q > からの引用です. 

< BLOCKQUOTE > 

< H 1>1 章： SGML への誘い </ Hl > 

< P > この章では，陕者のみなさんに SGML のイメージを 
つかんでいただくことを目的とし， 

SGML が登場した背景，その利用目的を説明します. </ P > 

く/ BLOCKQUOTE 〉 



(3) 任意ブロック （ DIV) 



DIV ( Division ) 要素は，「特定の意味を持たない」ブロックです. 2章で紹介した SPAN 要 
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素のブロック版です.望みの内容を意味するブロック系要素が用意されていない場合は ， DIV 
要素に適切な CLASS 属性を設定して，擬似的に表現してください. 

<DIV CLASS =" CHAPTER 1■ > 

く Hl > 私の PC </ H 1> 

< P > 私の PC の宣伝文句は，かの長島茂男さんがにこやかに語っていました_ </ P > 

く BLOCKQUOTE 〉 

< P > (■サボート体制で選べば，フローラ.」 </ P > 

く/ BLOCKQUOTE 〉 

< P > そう，日立のフローラです. </ P > 

<P> 94 年に購入したため，いまや口ーエンドなスペックです. </ P > 

</ DIV > 

<DIV CLASS = - CHAPTER 2 -> 

< H 1> 私のシーケンサ </ Hl > 

< P > 私のシーケンサの宣伝文句は，たしかこんな感じです. </ P > 

< BLOCKQUOTE > 

< P > 「ビデオテープサイズの音源一体型シーケンサ .J </ P > 

</ BLOCKQUOTE > 

< P > そう，ヤマハの QY -10 です. </ P > 

< P > おもちゃみたいな見た目のわりには，しっかりした音が鳴ります. 

僕は 97 年現在でも活用しています. </ P > 

</ DIV > 

#3.2.2. 特殊なブロック系要素 


(1) 水平線 ( HR ) 



トピックの区切りを表現するための要素として， HR 要素 （Horizontal Rule :水平線）が挙 
げられます（図 3-5). なお， SIZE 域性， WIDTH 域性， ALIGN 厲性は 4.0- Strict で破棄され 
ました. 


図 3-5. HR 要素 


< P > 以上をもって，説明を終わります. </ P > 
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#3.3.3. 单純ブロック系要素 

ここでは，その子要素としてインライン系要素のみを許すブロック系要素を紹介します • 2 
章で紹介した H 1〜 H 6 要素， P 要素もここに区分されます. 


(1) アドレス (ADDRESS) 



連絡先に相，する要ぶです.通常は，文, 1 !:の作荇への連絡先を記述します. e - mail アドレス 
を添えるのが一般的でしょう. 


<HR> 

<P> ご 意見 ご 要望 および 苦情は E-MAIL にて </P> 


<ADDRE 
<A HRE 


SS> 

F="mailto:ks@foo.bar.or.]p">e-mail to 


: ks! 


</ADDRESS 〉 


<HR> 


(ks@foo.bar.or.jp) </A> 




自然言語の感覚では「連絡先」はインライン系要素のような気がしますが， HTML ではブ 
ロック系要素に指定されています. W 3 C の仕様害によると，文害の「フッター」的に利 
用することが想定されているようです. 


(2) 事前整形ブロック (PRE) 



ブログラムのソースや詩などでは，特殊な位置での改行や余白が要求されます.それら特 
殊なブロックに相当する要素をすべて用意するわけにはいかないため， HTML では「ソースの 
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空白，タブ，改行をそのまま表示する」ブロックすなわち PRE (Preformatted Text ) 要素を用 
意しています.各種の特殊な改行や余白はあらかじめソース中で整形し， PRE 要素と指定し 
てください. 

<PRE CLASS="JAVACODE■ > 

public boolean action(Event e. Object o){ 
if (e.target == add_b){ 
ba 丄 IManager.add ()； 
return true; 

} else 

if (e.target == delete_b) { 
balIManager.delete(); 
return true; 

} else 

return super.action(e, o )； 

} 

</PRE> 


PRE ブロックの中にはインライン系要本が記述町能ですが，ソースの事前整形を崩す可能 
性のある要氣すなわち IMG や SUP などいくつかの要桌は排除指定されています. 


PRE 要素はあくまでも『特殊なケース』だけを担当するべきです.通常の段落は P 要素 
で，リストは UL 要素で記述するよう心がけてください. 


3.3 some more インライン系要素 



some more 

インライン系要素 


.では, 特殊な使われかたをするインライン要素 （ A , IMG , BR ) を紹介します. 





便宜上， #PCDATA もインライン系要素に数えます. 


#3.3.1. アンカー （ A ) 


<! ELEMENT A - - (%インライン系要素；> -( A ) > 

<!― 

A の子要素として A を禁止する.すなわち， A の中に A は入れられない. 


身 


1属性名 

属性値 

省略時の値 

備考 

HREF 

UR し 

実装依存 

リンク先の URL 

NAME 

文字列 

実装依存 

要素に文霪内での“名前"を指定する 


A (アンカー： Anchor ) 要素には大きく 2つの使い方があります.ひとつは，ハイパーリン 
クを実現するために HREF (ハイパーリファレンス）属性を用いるものです.もうひとつは, 
文書内に"内部名”を付けるために NAME 属性を用いるものです. 




HREF 属性と NAME 属性の両方を同時に指定することも可能です.ちなみに，両方を省 
略するのも文法上は可能ですが.そろするとアンカーの機能が無くなってしまいます. 
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(1) ハイパーリンク 

WWW の心臓でもあるハイパーリンクは，この A 要素で指定します.ハイパーリンク機能 
をあえて解説すれば，ユーザが A 要素を指示（クリックなど）した際に WWW ブラウザがそ 
の HREFM 性に指定された URL を自動的に読み込む機能です. 


「<P> 本署は <A HREF"http: //www.gihyo.co. jp/"> 技術評論社 </A> から 
出版されます. </P>J 


rherej 症候群 

暗黙の了解として，ハイハ^-リンク先の内容は，表示されているアンカー文字列の内容と関連するものに 
なつています.すなわち， r 技術評論社 j といろ文字がアンカー文字列であれば，そのリンク先は 
http://www.gihyo.co.jp/ や誰かが技術評論社について窗いた HTML 文 S などであるのが普通です. 

逆に言えば， A 要素を記述するときは，アンカー文字列の内容を読んだだけでリンク先が想像できるも 
のを選ぶべきです.といろことは， 


「技術評論社に関しては <A 


?= ■http : / /www.gihyo.co. jp/ ■ > こちら く / A>J 


という靄き方は望ましくありません.いつたい『こちら』つて何でしよう？これは 「here 症候群 j と呼ば 
れる一種の流行り （？） 病です.次のよろに修正するべきでしよろ. 

「く A HREF="http: //www.gihyo.co. jp/_> 技術評論社に関してはこちら </A>J 

「技術評論社に関しては 

<A HREF= "http ： //www.gihyo.co. jp/">http ： //\^ww.gihyo.co. jp/</A>J 


「<A 


■http://www.gihyo.co. jp/"> 技術評論社に関して </A>J 


また，「こちらをクリック J という表現も望ましくありません. WWW を利用する誰もがマウスを用いて 
いるとは限りません.ではどのように表現するべきか？こたえは，「こちら』という不自然な言葉を排除 
すれば自ずと明らかでしよう.そラ，リンク先を意味する単語だけを齧けばよいのです. 


tin 


このコラムは WAI の指針をもとにしています. http://www.w3c.org/WAI/ 


(2) 内部名 

たとえば， http :// www . foo . com / bar / test . hlml に次のような記述があるとします. 

<HlxA NAME= ■ intro ■ >1 •はじめに </Ax/Hl> 
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3.3 some more インライン系要素一 < 


この場合， 「http://www.foo.eom/bar/test.html#intro」 はこの部分に相当します.すなわち， 
HTML 文書に内部名 NAME がセツトされている場合，その文書を指す URL に# NAME を追加 
することによって，相当する部分を直接指示することができます. WWW ブラウザは 
URL#NAME を指示されると，その部分を表示しようとします. 

これを利用すれば，リンク付きの目次などを表現できます. 


< H 1> 目次く/ Hl > 

< UL > 

<LIxA HREF="test . html # intro ">1 . はじめに </ A > 

<LIxA HREFytest . html # main ">2 •スタイルシートの可能性く / A > 
<LIxA HREF="test . html # outro ">3 . さいごに </ A > 

</ UL > 




同一文香内で# NAME へリンクを指定するときは.ファイル名を省略しても檇いません. 
く A HREF ="# intro "> 〜 </ A >. 


内部名を指定する場合でも， A 袈ぶの終 r タグは«略できません.それにもかかわらず，こ 
の終 r タグはよく作き忘れられていますのでご注意ください. 


ID 属性による内部名表現 

以上のよろに A 要素には2つの使い方があるのですが，両者はまったく異なる性格の仕事を担っていま 
す.これは混乱の元です.そこで HTML 4.0 からは， A 要素ではなく，各要素の ID 属性を用いて文靄内部 
名を指定できるように変更されました. 


< H 1 ID =" 


•>1 •はじめに </ Hl > 


W 3 C は 「 ID 属性のほうが NAME 属性よりも好ましい J とは明言していませんが，筆者は 「 ID 属性が望 
ましい J と考えています.これからは， A 要素はハイパーリンクにのみ利用しましよう. 

ID 属性は， CLASS 属性と同じく BODY 要素のほぼすベての子要素に指定できます.しかし ， Netscape 
Navigator 4.0 はこの機能をサボートしていません（見当違いのところを表示してしまいます ）. Internet 
Explorer 4.0 はサボートしています.なお，互換性確保のために， A 要素の NAME 属性もこれまでどおり活 
用できます. 
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アンカーの入れ子 

アンカー要素の中にはインライン系要素が記述できますが， A 要素は排除されています.すなわち，アン 
カー同士を入れ子にすることは不正です（図 3-6). 

図 3-6. 不整な A 要素 
不正なアンカー例： 

< P > もしく A HREF = " music . html _> 音楽に興味があれば， 

<A HREF =" zappa . html ■ > とくにフランク • ザッパに </ A > 興味があれば， 

</ A > 私の害いた文章を読んでください. </ P > 

このルールは， NAME として用いる埸合でも変わりません. 


3.3.2. インライン画像 ( IMG ) 


省略時の値 



省略不可 

画像ファイルを指す URL 

省略不可 

代替文字 


文字列 


〇〇 ALIGN 属性は. HTML 4.0- Strict で破棄されました. 


HTML のマークアッブ自体では絵をかけませんが，既存の画像ファイルを文沓に埋め込むこ 
とは可能です.画像を指定する要素は IMG ( Image ) 要素です.画像は語句ではありませんの 
で，空要素です. 


(1) SRC 属性 

個々の IMG 要素は，実際には SRC (ソース： source ) 属性で指示される画像に置き換えら 
れて表示されます.「どんな画像形式のファイルでも指定できる」とは言えませんが， W 3 C は 
GIF , JPEG ， PNG を想定しています.なお， PNG は W 3 C が推奨する画像フォーマットです. 
余談ですが， MOSAIC の時代には，インライン画像は GIF のみでした. 
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3.3 some more インライン系要素 


PNG とは 

PNG (Portable Network Graphics :発音は fpingj と同じ）は， GIF や JPEG などと同じく.画像圧縮 
形式のひとつです.フルカラー RGB 情報に加えて a 値（色の透明度）も保持でき .y (輝度）補正も可能 
になつています. GIF と同様にインタレース表示力河能です.また， JPEG とは異なり，完全可逆圧縮にな 
つています. 

一般利用者には関係のない話かもしれませんが，じつは GIF フォー マツ ト（の内部の LZW 圧縮アルゴリ 
ズム）はユニシスおよびコンピユサーブの特許になつており. GIF を扱うソフトウェアを販売する埸合には， 
ロイヤリティを支払わなければならないことになつています.彼らは GIF が世界に漫透した後で.突然ロイ 
ヤリテイを請求し始めたため，業界では大変な物讀になりました.そこで， 『 GIF よりも優れていてしかも 
無料のものを作ろう! j と開発されたのが PNG なのです. PNG の名前には， rPNG's Not GIFJ という叫び 
が込められています. 

PNG の仕様は W 3 C Recommendation として公間されており，誰もロイヤリテイを要求できません.ち 
なみに ， Internet Explorer 4.00 以降も Netscape Navigator 4.04 以降も PNG を表示できます.なお， 
Netscape Navigator 2 •〇〜 3. x も，ブラグインによつて PNG を表示可能です. 

PNG の情報は，以下のサイトから入手できます.各種画像を PNG フォー マツ トに変換できるソフトウェ 
アも，同サイトで紹介されています. 

http://www.w3.org/TR/REC-png.html 

http://www.w3.org/Graphics/PNG/ 

http://www.cdrom.com/pub/png/ 


(2) ALT 属性 

画像を表示できない場合でも何らかの情報を提供するために， IMG 要素には ALT 
( alternative ) 诚性が用意されています.両像を表示しない WWW ブラウザは，画像の代わりに 
A じ T 属性に指定された文字列を表示します.したがって， ALT 城性に画像を説明するような 
文を指定しておくと，より多くの人に悄報を提供できることになります.とくに，画像にハ 
ィパーリンクを仕掛けてある場合は，この悄報が欺要です. 

ところで，代#文が必要ない場合は， fALT=""J と記述してください.これは「この画像 
にはとくに意味はありません」という愤祸的なアピールです.先に挙げたような画像を処理 
できない WWW ブラウザは，この指定を元に不必要な情報を除去します（図 3-7). 

<HlxIMG SRC=-mark.gif ALT=，■> 業績 発表く / Hl> 

<P> 今年の業績を，以下のようなグラフとして示します . </ P> 

<PxIMG SRC="score.gif ALT= ■[ 業縐の表】 -x/P 〉 

<P><A HREF=-score. jpeg-> より詳しい画像 </A> も別途用意しました . </P> 
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図 3-7. IMG 要素の画像 off 時の表現 

<画像 〇〇時> < 画像 off 時> 



余分な画像は要らない 

すべての WWW 利用者が画像を表示したいとは限りません.たとえば，画像は文章よりもデータサイズ 
が大きく，ネットワークから取り込むには時間がかかるため. WWW ブラウザを「普段は画像を表示しない J 
ように設定している人もいます.また，そもそも文字しか表示できない WWW ブラウザや.音声読み上げ 
式 WWW ブラウザといろものも世の中には存在します.このよラな人たちを考慮して，画像に頼り過ぎな 
t ヽ文薄を作成することも大事です. 








IMG 要素に， HEIGHT 属性/ WIDTH 属性を指定すると，画像の表示サイズを変更できます. 
は. WWW ブラウザは f 画像本来のサイズ J が指定されていると判断します. 

WWW ブラウザは，画像データ読み込み終了よりも前に.この指定の情報をもとにレイアウ 
軎を表示します.すなわち，読者の待ち時間を短くできるのです . Netscape Nagivator 4. 
Explorer 4.0 はこの機能をサボートしています.画像サイズを変更するつもりのない塌合でも 
示しておくとよいでしよう（図3>8). 


1属性名 属性値省略時の値備考 

HEIGHT 

WIDTH 

数値 

数値 

実装依存 

実装依存 

画像表示の縦ポイント数. HTML 3.2 から 

画像表示の横ボイント数. HTML 3.2 から 




筆者自身は「そもそも.画像に頼ったレイアウトのある HTML 文軎を S いてはいけない J 
と考えています.筆者の WWW リソースでは.画像をきちんと見てほしいときは外置き 
画像（アンカーのリンク先として画像ファイルを指定）にしており，インライン画像は簡 
単なアイキヤツチ用のものばかりです.したがって，ほとんどの旧 G 要素は ALT = ""で 
あり.あえて WIDTH . HEIGHT 属性は指定していません.「レイアウト情報が重要でない 
ならば， WIDTH や HEIGHT は付けなくてもよいんじやないかなあというのが筆者 
の考えです. 
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#3.3.3. 強制改行 （ BR ) 



通常の文は，表示領域の幅にあわせて自動折り返しされます.しかし，何かの事情で強制 
改行したい場合は， BR (Line Break) 要素を利用します. BR 要素は空要素です. 


<P> 古典の <CITE> 「平家物語 J </CITE> ですつけ，私の記憶が確かならば… </P> 
く BLOCKQUOTE 〉 

<P> 

祇園精舎の錶の声， <BR> 

諸行無常の響きあり。 <BR> 

沙羅双樹の花の色， <BR> 

盛者必衰の理をあらはす。 

</P> 



改行は段落ではない 

BR 要素はあくまでも強制改行であつて.段落を作る要素ではありません. 

そもそも，段落は「改行』で作られる.といろのは単なる思い込みです.たとえば，新聞の小さなコラム 
櫊のよラに，段落で改行せずにマークを示すだけの場合もあります. 

HTML 文章中の段落と 「 P 要素 j で示しておけば，その表示方法はスタイルシートで自由に変更ができま 
す.この「新聞コラム J も表現可能です. 

日本語の檷準的な段落： 

P{ 

display : Block; 
margin-bottom : 0em; 
text-indent : lem ； 

} 

新聞コラムなどの段落： 

P{ 

display : inline ； 

} 

P : before { 

content : : 

} 

一方， BR 要素で書いてしまつては，このよろな調整は不可能です. HTML 本来の思想に基づいて P と 
BR を正しく使い分けてください. 






HEAD 要素の 
子要素 


HEAD 要素の子要素は，2#•で紹介した TITLE 要素以外はすべて応用的な要素です.その機 
能はあまりに多岐にわたるために，本#の範喀を超えます.そこで本書では，説明をスタイ 
ルシートを用いる上で必要な範囲に限定します.とはいえ，本章では文書型定義的な紹介に 
とどめ，活用のための解説は4章で行います. 



<! ELEMENT HEAD 〇 〇 ( TITLE ) +( STYLE | LINK ) > 


STYLE , LINK は順序を問わず何個でも記述できます. 



#3.4.1. STYLE 要素 


:! ELEMENT STYLE - - (% スタイルシー 



1厲性名 

属性値 

省略時の値 

備考 

TYPE 

文字列 

省略不可 

スタイルシートの種類を明示. 4.0 より 

MEDIA 

文字列 

実装依存 

再生メディアの指定 

TITLE 

文字列 

実装依存 

文霪内におけるスタイルシートのタイトル 


ス タイル シートを HTML 文書内部に記述するとき に用いる 要素です. TYPEK 性 ， MEDIA 
㈣ 性， TITLE 诚性の意味を含め，詳しくは 「4.3. HTML 文書との連携」を参照してください. 


_) 3.4.2. LINK 要素 











Chapter 3 some more HTML 






HREF 

UR し 

実装依存 

リンク先 URL 省略しては意味をなさない 

REL 

文字列 

実装依存 

現在の文書から見たリンク先の説明 

REV 

文字列 

実装依存 

リンク先から見た現在の文書の説明 

TYPE 

文字列 

実装依存 

データの種類を明示. 4.0 より 

MEDIA 

文字列 

実装依存 

再生メディアの指定. 4.0 より 

TITLE 

文字列 

実装依存 

リンク先を指す名前 


LINK 要素は，現在の文書と関連するリソースを列挙するための要素です.どのような意味 
で関速しているのかは， LINK 装:灰の REL (Forward Relationship ), REV (Reverse Link ) 铋性で 
指定します（表 3-2). スタイルシートファイルも「関連文咨」の一棟として LINK 要素で指 
定できます.詳しくは「4.3. HTML 文 A •との速携」で解説します. 


表 3-2. HTML 4.0 仕様 S が紹介する RE し REV 属性の属性値 




ALTERNATE 

現在の文霈の代替文•霞一別言語訳など 

STYLESHEET 

スタイルシート 

ALTERNATE STYLESHEET 

代替スタイルシート 

START 

現在の文 S が所属する一連の文2の〖はじめ』 

NEXT 

次の文霞 

PREV 

前の文 S 

CONTENTS 

現在の文 a が所尿する一連の文謹の目次 

INDEX 

現在の文 g の目次 

GLOSSARY 

現在の文章に対する「用語集』 

COPYRIGHT 

現在の文霞の版権を説明する文霪 

CHAPTER 

現在の文章の中の f 章 j になる文霞 

SECTION 

現在の文章の中の『節 j になる文® 

SUBSECTION 

現在の文章の中の『項 j になる文 S 

APPENDIX 

現在の文書が所属する一連の文書の丨索引 j 

HELP 

現在の文書に関するヘルブ文耋 

BOOKMARK 

ブックマーク 


:いわいるリンク集で，文書に対する「索引』のよラなもの） 
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3.4 HEAD 要素の子要素 一く 


スタイルシートに限らず， NEXT や INDEX を適切に記述しておくと，文書ナビゲートに関 
していくつかの利点が得られます. 

• 印刷時に WWW ブラウザが関連文書を列挙できる 

• ユーザが現文書を読んでいる間に， WWW ブラウザは関連文書ファイルを先読みできる 


<HEAD> 

<TITLE>TEST</TITLE> 

<LINK REL="STYLESHEET- TYPE="text/css" MEDIA= - SCREEN' TITLEDSTANDARD■ 
HREF="normal.css"> 

<LINK REL=-NEXT_ TITLE=■SECTION2■ HREF=■foo2.html - > 

</HEAD> 
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CSS syntax 
in detail 


2 • 3 章では， HTML 文書からスタイノレ情報を締め出すことで，単純かつ一般性のある文霤になる 
ことを解説しました.今後の章では，スタイノレ情報をスタイルシートとして構築する手順を解説しま 
す. 

4章では，スタイルシート記述の文法的な側面を解説します.ただし，文法の全てを知っていなけ 
ればスタイルシートを書けないか，といえばそうでもありません.先に6章 [road to mastering 
CSSJ を読み，関連する文法だけを抜き読みしてもかまいません. 

なお， CSS 2 で新しく採用された仕様には rCSS 2 J である旨を明示します.現在のところ， 
WWW ブラウザは CSS 2 をサボートしていないことにご注意ください. 



Chapter 4 CSS syntax in detail 



記逋のルール 




#4.1.1. 文字の扱い 

CSS 仕様のスタイルシートの記述は，たいへんに「定型的」です.すなわち， URL とフォ 
ントファミリーの指定を除き，あらかじめ規定されたキーワードを.選択したり，数値を記入 
するだけでシートは完成します. 

シートの一般様式は「要素名1プロパティ名：指定する値 I 」です.具体的なブロパティや 
その値に関しては5章で詳しく解説することにし，4章ではシートそのものを記述するための 
文法に閲して解説します. 

まず，スタイルシート記述に用いる文字に関する取り決めは次のとおりです. 


•全角半角 
• 大文字小文字 
•単語の区切り 

•コメント 


半角のみを用いる（コメントは別） 

区別されない （ URL を指定する部分などは別） 

スペース，タグ，改行（区切りを連続して複数記述しても，1つの区切り 
として扱われる） 

「广」から「 V 」で囲んだ部分（コメントは入れ子にできません . r test 
/* test */ tesf / とは害けません） 


©4.1.2. スタイル指定の一般形式 

專門用語として，「スタイル指定が適用される先」を「セレクタ （ Selector )」 とよび，「指定 
するスタイル内容」を「宣言 （ Declaration )」 と呼びます.すると，シートの一般様式は， 

「セレクタ I 宣言 1 J 

になります. 

端的には，セレクタは HTML の要素そのものです.しかし，実際にはいくらかのバリエー 
ションがあります.そのバリエーションを定めるのが「文法」です.まず，図 4-1 に正規の文 
法をいくらか簡略化したものを提示し，以降で各々のバリエーシヨンについて解説していき 
ます. 
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4.1 記述のルール 


図 4-1. CSS の基本文法 


記述の説明 


< > 害くべきものの説明 

() 省略可能な語句 

() … 0回以上の繰り返し 

I or を表わす記号：どちらか一方のみを記述 

r v コメント 

それ以外そのまま書く （ピリオド，コロンなど） 


スタイル指定の一般式： 

<セレクタ> (，<セレクタ： >) … |<宣言> (; <宣言 >) …1 

/•セレクタはカンマ （，） で区切ることで， 

宣言はセミコロン （；） で区切ることで， 

グルービングか可能. 


宣言： 




<プロパティ値〉： <値> (( important ) 

I 广空の宣言も許されている V 

/^ important キーワードは，カスケーディング処理で使われる •/ 




#4.1.3. セレクタや宣言のグループ化 

同じセレクタに対する宣言をまとめて記述する際には，宣言をセミコロン （;） でつないで 
グルーブ化します.また，同じ宣言を複数のセレクタにまとめて記述するには，セレクタを 
カンマ（，）でつないでグルーブ化します- 

なお， 分けて記述してもまとめて記述しても，意味は変わりません. 


分けて記述した例： 

P { font - weight : 500}/•太さ500•/ 
P { text - align ： left } 

CITE { color ： red ) 

STRONG { color : red } 

CITE { font - style : italic } 
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Chapter4 CSS syntax in detail 


まとめて記述した例： 

P { 

font-weight: 500; 
text-align ： left; 

} /♦ 最後の宣言にはセミコロンは不要ですが， 

付けても不正ではありません. •/ 

CITE, STRONG{color: red} 

CITE{font-style : italic} 

#4.1.4. 宣言が衝突した場合の処理 

宣言内容が衝突した部分一同じ要素，同じブロパティに複数の指定がなされた場合一は, 
後になされた宣言のみが有効になります. 

受け取ったシート： 

P { 

text-align ： center ； 
color ： black; 

} 

P { 

text-align ： left; /* 同じ要素 • 同じプロパティの宣言が既にある*/ 


有効になる宣言： 

P { 

color ： black ； 


P { 


text-align ： 丄 eft; 


/* もっとも後ろのものが採用される*/ 


ただし， ！ importam キーワードが付けられていた場合，優先順位は変動します. 

受け取ったシート： 

P { 

text-align ： center ! important ； 
color ： black ； 

} 

P { 

text - align ： left ; /* 同じ要索•同じプロパティの宣言が既にある*/ 


82 



4.1 記述のルール 


有効になる宣言： 

P { 

color ： black ? 

} 

P { 

text - a 丄 ign : center ； 

} 


tant のうち，もっとも後ろのものが採用される 


©4.1.5. 


important キーワードは，後述のカスケーデイング処理でも用いられます. 

属性値による対象の限定 


(1 )CLASS と ID 

CSS では，要素全般への指定だけでなく， HTM じ文齊中での ID や CLASS 诚性を特定したス 
タイル指定が可能です. 1 D はシャープ （#) で，クラス名はピリオド （•） で指定します 
( CSS 2 では，「#が取り扱うのは HTML の IDW 性ではなく，诚性侦が機能を持つすべての诚 
性である」と拡張されています.この拡張は， XML を考虛に入れたものでしょう）. 


一般例： 


:要素名 >. < クラス名> |<宣言: 

:要索名 >#< ID > |<宣言>1 


宣言例： 

BLOCKQUOTE { /* クラス名を問わずに適用されるスタイル*/ 

font - style : italic ； 

margin ： 0.2 em 2 em ;/* 上下マージン 0.2 em , 左右マージン 2 em */ 

} 

BLOCKQUOTE . BEATLES { color : red } /* クラス BEATLES のみの追加スタイル*/ 
BLOCKQUOTE . STONES { color : blue } 




cm 


em は「一文字分』を恿味しています. 


(2) その他の属性による限定 

CSS 2 では， CLASS , ID 诚性に限らず，すべての铋性をもちいて対象セレクタを限定できる 
ようになります. 



Chapter4 CSS syntax in detail 


► 「要素名[属性名]」…その属性が宣言されている場合に有効.値は問わない 
A[HREF] {font-style ： italic } …リンク先を指定したアンカー 
A [NAME] {font-weight : bolder} ••• 内部名を指定したアンカ ー 


► 「要素名[属性名=属性値】」•••その属性値が指定されている場合にのみ有効 
HI[ALIGN=■CENTER-]{text-align ： center；} 

A[HREF= B index.html■]{color ： red;} 

A[rel="NEXT"J{color: blue;} 


► 「要素名[属性名- = 属性値】」•••属性値がスペース区切りの値リストの場合に，その値の中に 


1つでも指定した属性値のものがあれば有効（主に CLASS 
属性） 

「 P[class 〜 =LOVE] {color : red}J ならば， 

〇 … <P CLASS= B LOVE B > 

〇 … <P CLASS= - LOVE PEACE SPECIALS 


► 「要素名[属性名 1= 値]」•••属性値がハイフン区切りの値リストの場合に，その値の中に一つ 


でも指定した属性値のものがあれば有効（主に LANG 属性で，言 
語別に指定を切り分ける場合などに使われる. 「: lang 」 疑似クラ 
スを参照） 


BLOCKQUOTE[lang|=fr] 

(quotes : •《' 

•》• } 

BLOCKQUOTE[lang|=ja] 

{ quotes : 1 f' • 

J *) 


(3) クラス名による限定の拡張 

CSS 2 では，1つの要素に複数のクラスが指定されていることを考應し，クラス名へのアク 
セスを強化しました. 

► 「要素名.クラス名1.クラス名2」•••クラス名を複数指定した場合， class 属性値の並びの中 

に指定したすべてのクラス名を含んでいる場合のみ有効 

r P.LOVE.PEACE{color : red} J ならば， 

X *<P CLASS=-LOVE B > 

〇… <P CLASS= - LOVE PEACE SPECIALS 


(4) 要素名を指定しない宣言 

CSS 1 では， 1 D やクラス名だけを指定した宣言（要素名を省略した宣言）を行ったならば, 
すべての要素に関する指定を行ったことになります. 
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4.1 記述の ルール 


要素を問わない指定： 


.< クラス名> |<宣言>1 
#<ID> 1< 宣言 >| 


例： 

/♦BLOCKQUOTE でも P でも， CLASS= ■ BEATLES ■ ならば色を変える */ 
.BEATLES{color : red) 

/ * 要素は問わずに ID= _ CHAPTER2 ■ に指定 */ 

#CHAPTER2{color ： blue ; } 




CSS2 では，要素名を「*1と S いた埸合に.丨すべての要素に対する宣言をした j と解釈 
することに変更されました.なお.上位互換のため， CSS1 と同じ記述方法も可能です. 
CSS2 における〖*1は過度に強力な仕組みで. 4.2 で説明する「継承』の利点を無視し 
た指定すら可能になります.使用する際には.本当に必要なのかどうかを十分検討してく 


ださい. 


例： 

/* 強制的に，すべての要素の色を指定 •/ 

* {color ： balacJc ； background : white} 


©4.1.6. CSS1 における文脈判断 

许 通のスタイル 宣言は， 指定した要素が文， 1 ?中のどこに現れてもすべてに適用されます. 
すなわち， 

STRONG{ color: red;} 

とさえ記述すれば， STRONG 要龙が H1 中に現われようと P 中に現われようと，文脈を問わず 
に赤色になります. 

しかし，「見出しの中の STRONG 要素だけ色を変えたい」ケースもあるでしょう.たとえば， 
H 1 要素も 「 color: redj と指定されているため，同じ STRONG でも 「H1 に含まれる場合だけ」 
青色にしたいというケースが考えられます（図 4-2). 

CSS1 では，「対象要素が特定の親要素に含まれた場合にのみ有効になるスタイル」を，「親 
要素」「子要素」の順に「スペース」で区切って並べたセレクタを用いて指定できます.これ 
を文脈付きセレクタ (Contextual Selector ) と呼びます. 
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一般形式： 



宣言例： 

、単純宣言 */ 

BODY{ 

color: black; 
ront-size ： l 0 pt; 

color: red; 

font-size ： bolder ； 

text-decoration: underline; 

} 

STRONG { /• すべての STRONG に適用されるスタイル */ 

color: red; 
ront-style: italic ； 

} 

/*H1 に含まれる STRONG にだけに対する “ 追加の ” スタイル */ 
HI STRONG{color ： blue；} 

図 4-2. HI に含まれる STRONG だけへの追加指定 


<H1> 私の く STRONG 〉 趣味 </STRONG> について </Hl> 
<P> 私の趣味は <STRONG> 音楽 </STRONG> です . </P> 
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©4.1.7. CSS2 における文脈判断 

CSS 2 では，文脈判断が CSS 1 よりも数段強力になりました. 

(1) 子孫セレクタ（下降セレクタ ， descendant selector ) 

これは， CSS 1 における文脈付きセレクタと全く同じものです.さきほどは明言しませんで 
したが，子孫セレクタにおける「親子関係」は，直接の「子」には限定されません.たとえ 
ば ， 「BLOCKQUOTE STRONG 」 とは， BLOCKQUOTE 要素に含まれるすべての STRONG 要索 
に対する指定であり，次の STRONG 要素にも適用されます. 


く BLOCKQUOTE 〉 

<P> 私の趣味は <STRONG> 音楽 </STRONG> です. </P> 
</BLOCKQUOTE> 



(2) 子セレクタ (child selector ) 

子孫セレクタとは異なり，ある特定の要素が直接の親要素になった場合にだけ有効になる 
宣言を行いたい場合は，この「子セレクタ」を用います. 
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Chapter 4 CSS syntax in detail 


一般形式： 


I 


親要素 > 子要素 {< 宣言 >} 



宣言例： 

DIV.BEATLES > P { font - family : sans - serif ；} 


例ソース： 

< P > もちろん，僕だって BEATLES は嫌いじやない. (—ここには通用されない) 

<DIV CLASS =" BEATLES "> 

< P > 好きなのは，初期のロックもの.ハード•デイズ•ナイトなどには感涙. 

しかし，次にリストアップする曲は嫌い.（—ここには通用される） 

< UL > 

< LIxP >< エスタデイ (—ここには適用されない) 

< LI >< P > へイ • デュード (—ここには通用されない) 

< LIxP > ロング•アンド • ワインデイング • ロード ここには遇用されない) 
</ UL > 

< P > 中期以降でも，やはりサージエント•ぺパーズなどは好き.（—ここには適用される) 
</ DIV > 


(3) 隣接セレクタ (Adjacent sibling selector ) 

親子閲係ではなく，文#中の連続閲係に注目したのが「隣接セレクタ」です.たとえば， 
「 H 1 要素直後の H 2 要素」などに指定したい場合に用います（一般に，見出しが上位の見出し 
に速続する場合と地の文車に続く坳合とで，マージンなどを変えることは多いでしよう）. 

一般形式： 


直前要素 + 直後要素 {< 宣言 >} 


宣言例： 

H1 + H2{margin-top : 0em；} 
H2{margin-top ： lem；} 




例ソース： 

く Hl > すみけんリソース！く/ Hl > 

<H2> 前 IF き </H2><! --—ここは H1+H2— > 
<P> うんぬんかんぬん 

<H2> 目次く /H2><!--— ここは H1+H2— > 
<UL> 
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4.1 記述のルール 


< LIxP><A HREF =- first > ラんぬん </ A > 
<LIxPxA HREF =- second - > かんぬん </ A > 
</ UL > 


(4) 複雑な指定の場合の優先順序 

各種文脈の指定は，複数の種類を混ぜることが可能です.その場合でも，指定は単純に前 
から順に読み解くだけであり，特別な優先順位は存在しません. 

•「 AB . NAME > CD {宣言}」…要素 D で要素 C の内部のもの，ただし要素 C は要素 B の直下 

の子要素であること，ただし要素 B は要素 A の内部のもので， 
クラス名として “ NAME ” が指定されていること. 

#4.1.8. 疑似クラス 

(1) 疑似クラス （ pseudo - class ) とは 

WWW にとって有用な悄報が，必ずしも HTML 文#インスタンスそのものから判断できる 
とは限りません.たとえば，アンカーには「まだ表示したことの無いリンク」「既に表示した 
ことのあるリンク」などの性 K の迩いがあり，その性質に応じてスタイルを変えることは介 
理的ですが，その迪いは WWW ブラウザの股歴悄報によってはじめてわかるものです•した 
がって，いくら HTML 文办を眺めても判断できません. 

このような場合に活用されるのが「疑似 (pseudo) クラス」です.「疑似クラス」は，文禆 
中には実在しない性質に芯 H してスタイルを宣言するための手段です. 

(2) リンク疑似クラス (link pseudo - class ) 

CSS 1 では，上述した「アンカーに対する3つの疑似クラス」のみが用意されています. 


アンカーの疑似クラス： 




:link 

まだ表示したことのない URL を指すリンク 

: visited 

既に表示したことのある URL を指すリンク 

: active 

ユーザが選択中のリンク（マウスで触つているなど） 


疑似クラスへのスタイル宣言は，要素名と疑似クラス名をコロン（：）でつないで記述し 
ます. 


A ： link { color : buie } 

A ： visited { color ： lime } 

A : active { color : red ; background : # e 88;} 
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(3) ダイナミック疑似クラス （dynamic pseudo - class ) 

CSS 2 では，リンク疑似クラスを 「: link 」 と r ： visitedj の二つに限定し，あらたに「ダイナ 
ミック疑似クラス」として r : activeJ [ : hoverJ 「: forcus 」 の3つを導入しました. 



ス名 説明 


現在選択中の要素（マウスで触つている.スペースキーを押している.など） 

マウスなどがその上に来ている要素 

キーボードなどでフォーカスが与えられた要素 


疑似クラスを複数用いることによって，「リンク済みでアクティブ」「未リンクでアクティ 
ブ」を表現できます. 

A: 丄 ink:active{color : white; background ： #555} 

A:visited:active{color:red; background : #955} 

「: fooisj は， HTML 4.0 で強化されたアクセスキー（キーボードショートカット）設定に対 
応するもので，フォームやリンクで活川されるでしょう.また， outline ブロパティと r：forcusJ 
疑似クラスを組み合わせることで，イメー ジマッブ中の選択された部分に枠をつけるなどの 
表現も可能になります. 

なお，リンク疑似要素はアンカー專用の疑似费素でしたが，ダイナミック疑似要素はすべ 
ての要索に適用されます.たとえば，「マウスをかざした部分だけ色が変わる目次」などに応 
用が可能です. 


UL.CONTENTS LI : hover{color : black ； background :# f8 f;} 


(4) 言語疑似クラス (: lang () pseudo - class ) 

CSS 2 で追加された疑似クラスで，言語属性を表現するものです.引用符記号など，言語に 
依存する表現を使い分けたいときに有用です（文#の言語诚性は，対象にする要素に直接 
LANG 诚性が指定していなくても， META 铖性や親子関係から判断できます.この意味で， 
[ lang := us 】 とは適用範囲が異なります). 


: lang(fr) > Q { quotes: } 

: lang(ja) > Q { quotes : ■ 「• ' J '} 


(5) r 最初の子」疑似クラス(: first-child pseudo - class ) 

CSS 2 で追加された疑似クラスで，同列の子要素のうち，文書中の順序が一番始めである要 
素を表現するものです. 
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4.1 記述のルール 


例： 

P > STRONG ： first-child{ font-size ： larger) 

<P> いいですか， 僕がく STR0NG> r オイツス J </STR0NG> とぃったら， 

みんなも「オイッス J と応えるのが礼儀です. 

また，儀式として，僕は <STRONG> 「声が小さい，もう一度！」 </STRONG> と言い返すので， 

ここで皆さん笑ってください. 

©4.1.9. 疑似要素 

(1) 疑似要素とは 

疑似•挺素も，疑似クラスと同様に，実際には文押中に存在しない要素を操作するものです. 
あえて性格を要約すれば， r , 印こうと思えば文游中に記述できるが，規則性を持って自勋処理 
することが空ましいもの」が疑似要素に設定されています. 

疑似要素へのスタイル宣言も，疑似クラスと m じく，费素名と疑似クラス名をコロン （ ：〉 
でつないで記述します. 


(2) 「はじめの文字 (: first - letter)J I * はじめの 1 行 (: first - line)J 

CSS 1 では， 「はじめの 文字(: first - letter)J 「はじめの 1行(: first - line ) J の2つの疑似要素が用 
意されています.その名のとおり， 「はじめの 文字」 「はじめの 丨行」だけを異なる見栄えで表 
示したい場合に利用します (図 4-3). 


図 4-3. first-letter 疑似要素の使用例 

H1 : nrst-letter{font :2em fantasy} 


く HI >History of WWW く / HI >” の表示イメージ： 



story of WWW 


(3) 「前（: before )』 「後(: after)J 

CSS 2 で追加された疑似要素で，各要素の前後に，自動的に文字などを挿人したい場合に用 
います.各疑似要素で表示したい内容は，専用のブロパティ 「 content 」 で指定します （7 章を 
参照). 
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HI : before{content : ■ 一章一 -; font-size: 1.5em ： display:block;} 
BLOCKQUOTE : before{content: open-quote} 

BLOCKQUOTE : after{content : close-quote} 

BODY: after {content: ■ 以上，終了 . margin-top ： 5em；} 


#4.1.10. @ media ブロック 

たとえば，一般的な画面 ( screen ) と異なり，文字端末 （ tty ) では文字色，サイズを一定に 
して表現しなければなりません.このような違いを把握したうえで，メディアごとに指定値 
を切り替える必要があります. CSS 2 では，メディアを指定してシートを記述するために， 
@ media ブロックが用意されています. 

CSS 1 には @ media に相当する仕組みはありませんが，シートの想定メディアは HTML の 
LINK 要素で指定すればよいため，とくに困りません.互換性確保のこともあり，今のところ 
は 1つの シートは特定のメディアのみを想定して記述しておき， HTML 文#からメディアを指 
定するほうが得策でしよう.なお，具体的なメディアの特徴および LINK 要素に関しては 
4.3.5 .を参照してください. 


@meaia screeru 

Hi{ font-size: 3em} 

H2{ font-size ： 2em} 

> 

©media screen, tty{ 

Hl{ 

text-align: right; 
margin-top ： 2em; 

H2{ 

text-align ： center ； 
margin-top ： lem; 
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4.1 記述のルール 


@ 4 . 1 . 11 . @import 宣言 

スタイルシートは，基本的にはテキストファイルとして作成•保存されています.各々の 
シート同時は独立した存在ですが，あるシートに別のシートを取り込むことも可能です. 


拡張子 r.cssj 

css によるスタイルシートファイルの拡張子は r . cssj としてください.これはコンテントタイプ 
( MIME タイプ）指定 “ text / css " とからんだ取り決めです.くわしくは， RFC 2318 を参照してください. 


@ import キーワードは，既存のスタイルシートファイルの取り込みを宣言します （ C 言語の 
include に似ています）. WWW ブラウザは，受け取ったスタイルシートファイルに @ import が 
掛かれていれば，そのシートも同時に読み込みます. 


@import の指定法: 




©import •スタイルシートを指す URL " ; 
©import url (スタイルシートを指す URL ) , 


@ import で取り込んだ後に独自の宣言を#き込むことで，指定を追加，上禅きできます. 


©import url(http：/ /www.wj. org/pub/WWW/def-style.css); 
@import url(my-style.css); 

STRONG {colors red} /* このシート独自の追加宣言 */ 


@ import を複数指定することも可能ですが，シート独自の追加宣言よりも前に記述する必要 
があります.なお， @ import で取り込んだシート問で宣言が衝突した場合は，単純にもっとも 
後ろに害かれた宣言のみが有効になります （4.1.4 .を参照). 
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維承と 

カスケーデインク 


馨)4.2.1•継承 （ inheritance ) の利点 

HTML 文谱インスタンスには多くの要名が#かれています.また，スタイルシートで調整で 
きるプロパティも多岐にわたります.では，すべての要素にすべてのブロパティについての 
指定を行わなければならないのでしょうか？ 

指定の鞋 M 化と合理化のために， CSSS 「継承」という仕組みを提唱しています.継承と 
は， HTML 文游•インスタンスの怫成に沿って，親要索から子要素へスタイルを伝播させる仕 
組みです. 

^ - ^ 

• 各要素は，まず文脈上の親要素に対するスタイル宣言を「継承』する . 

• 継承した上で，自分への宣言を「追加 • 上書き J する . 

^- 4 

具体例を用いて説明しましょう（図 4-4, 4-5). 


図 4-4. 例文 # の文 8 橘造 
<BODY> 

<H1> 0IB<STRONG>1997 年 11 月 24 日 </STRONGx/Hl> 

<P>TV で偶然に <STRONG> 西行法師 </STRONG> の短歌を聞いた . </P> 

く BLOCKQUOTE 〉 

<P> 「ねがわくば，桜の元で，春死なん」 </P> 

く / BLOCKQUOTE 〉 

<P> 本当はこの後に下の句が続くのだが，忘れてしまった . 

しかし，これだけでも大変見事に「日本人の風情」を表現していると思う . </P> 
</BODY> 


BODY{ 

color : black ； 
font-size ： 10pt; 

} 

Hl{ 

font-size ： 15pt; 
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4.2 継承とカスケーデイング-^ 


font-family ： sans-serif ； /* ゴシック系を期待 */ 

} 

BLOCKQUOTE{ font-style ： italic} 

STRONG{ font - weight: bold} 


-H4 


-SffiQNGfl-)- 


- K - B - 




-BteeKQyere- 




卡(甘 


BODY 



図 4-5. スタイル適用例 


日記 1 的 7 年 11 月 24 日 

vj で瞧猶丽勿彌:を聞いた> 

「城わくば m >7 cr ； 概なん 1 
本当はこの衡こ下の句が曉くのだが,忘 M てしまった。し 
かし，これだ I ナでも取こ「日本人^ a 情」を葬見し 
ていると思う。 


この文脈における H 1 は，まず BODY の宣言を継承し， 

color ： black ； 
font-size ： 10pt ； 

に設定されます.その後，自分への宣言を追加•上書きします.したがって，結果として, 

color ： black ； 

font-size: 15pt; 

font-ramily ： sans-serif ； 

を採用します. 
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図 4-5 における HI に関するスタイル宣言は，「フォントサイズとファミリーの変更は必要だ 
が，色に関してはこだわらない」という考えで記述されています.すると，色は「継承」に 
よって親要素のものが自動的に適用されるのです.すなわち，シート記述者は，必要な要素 
に対して必要なブロパテイのみを宣言するだけでよいのです. 

► その要素でとくに変更したいブロパテイのみを宣言すればよい 

「継承」の，この利点により，スタイルシートは簡潔でわかりやすいものになるでしょう. 

次に， STRONG 要素を見てみましょう. 一口に STRONG 要素といっても， 「 H 1 に含まれて 
いる STRONG ⑴」と 「 P に含まれている STRONG (2>」 とでは，それぞれ継承する親要素が異 
なるため，最終的に採用するスタイルが異なります.明示するならば，次のようになります. 


STRONG(1){ 

color: black; /*H1 … BODY*/ 
font-size： 15pt; /*H1 ♦/ 

font-family： sans-serif； /*H1*/ 
font-weight: bold; 

} 

STRONG(2){ 

color： black； /*P••• BODY*/ 
font-size: 10pt; BODY*/ 

font-weight: bold; 

} 


各要素の親要素は固定ではなく， HTML 文禆の文脈によって変ります.このすベてのケース 
を明示してスタイルを調整していくのは大変です.しかし，「継承」によってこれらは自動的 
に調整されるのです.これも「継承」の利点としてあげてよいでしょう. 

► 指定しなかったブロパテイは，文脈に合わせて適切に調整される 


もし「継承」の仕組みが存在しなければ，必要となるすべての文脈に関してあらかじめス 
タイルを宣言するはめに陥ります.しかも，文書が異なれば必要な文脈は変わってしまうた 
め，「特定の HTML 文書にしか利用できない」スタイルシートが出来上がるでしょう.このよ 
うに考えてみると，「継承」はシートの汎用性/再利用性の確保にも役立っています. 

さらに，「すべての文脈について，すべてのブロパティを宣言している」場合に， H 1 要素の 
フオントサイズを変更したくなったとしたら，関連していくつの宣言を修正することになる 
でしょう？この例では 「HI STRONG 」 だけですが，文書が異なれば，さらに増える可能性が 
あり，修正はだんだんと面倒なものになるでしよう.このように考えると，「継承」はメンテ 
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ナンスしやすさーメンテナンス性一の向上にも役立っています. 

シート記述者は，「継承」という単純なルールが産み出すさまざまな利点を十分意識する必 
要があるでしよう. 




宣言記述の顧 

継承はあくまでも HTML 文霞インスタンスの入れ子構造にしたがって行われるので.宣言記述の順番を 
入れ替えても継承処理には何の影罾もありません. 


P{ 


color : white ; 


BODY{ 

font - size ： 12 pt ; 
color ： red ； 


この塌合でも， P 要素は先に BODY 要素から指定を受け継ぎ （ BODY は本文の羅上位の親要素ですから， 
常にその指定は継承されます)，その後. P 要素に直接指定された宣言を受け入れます.したがつて， P の 
color ブロパテイは上靨きされます. 

しかし，「後に書かれた方が有効になる J よろに注意して靄いたほろがわかりやすいのではないでしよラ 
か. 

BODY{ 

font - size ： l2pt ； 
color ： red ； 

} 

P{ 

color ： white ； 

> 

このように窗かれていた方が， fP は BODY の子要素であり， BODY の指定を継承する.継承した上で， 
color は上靄きされる J という関係が理解しやすいと思われます.簞者は，文■型定義における親要素から 
順に宣言を記述することを奨励します. 


©4.2.2. 継承されないブロパティ 

継承は大変便利な仕組みですが，すべてのブロパティが継承されるわけではありません. 
なぜなら，継承するべきでないブロパティも存在するからです（継承されるのか否かは，プ 
ロパテイごとに仕様書で定められています). 
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たとえば，背景画像の指定は継承されません.仮に BODY の背景画像が P に継承されたとす 
ると， P が現われるたびに背景が書き直され，図 4-6 に示すような結果になります.どちらか 
といえば，「背景画像の付け直し」よりも「すでに表示されている背景の上に文字を表示する」 
方が，すなわち，背景は継承されないほうが標準的だと考えられます （ CSS の badcgrmmd-color 
プロパティの初期値は transparent (透明）になっており，親要素の背景をそのまま表示するこ 
とが想定されています). 


図 4-6. 背景が継承されるとしたら 



また，“直前のテキスト”との垂直位骹関係（上付き下付き）も継承されません.たとえば, 
図 4-7 の HTML コードの SUP の上付き効果を STRONG が継承してしまえば，結果は「上付き 
の上付き」すなわち re の （2 の x 乘）乘」 のように表示されてしまいます. 


図 4-7. e の （2 の x 乗）乗？ 

e<SUP>2<STR0NG>x< / STRONGx/ SUP> 


9 V 2 X 

e ••で 


? ? 
• • 




CSS 2 では，すべてのブロパテイの属性値として HnheritJ が用恚されました.これを明 
示した埸合は，丨通常では継承されないプロパティ j であっても値が継承されます. 


變 U .2.3 •カスケーデイング ( cascading ) とは 

CSS の仕様は， HTML 文書に対して 「WWW ブラウザ標準のスタイルシート」「ユーザ（読 
者）が標準とするスタイルシート」 「 HTML 文書作成者が指定するスタイルシート」の3つの 
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スタイルシートが用意され，この3者の指定を融合させることを想定しています.この3種類 
のスタイルシートの宣言の融合法，指定が衝突したときの混乱解消法を“カスケーデイング” 
と呼びます. 

CSS が想定するカスケーディング処理の基本は，単純で明快です. 

CSS では，各スタイルシートの指定に優先順位をつけています.それを数学の大小記号であ 
らわすと， 「 WWW ブラウザ」<「ユーザ（読者)」< 「 HTML 文畨作成者」です.それぞれの 
スタイルシート問で衝突するプロパティ値が宣言されているときは，優先順位が高い方の指 
定だけを採用します.宣言が術突しない場合は，単にそれを採用します.これが，カスケー 
デイング処理の基本です（すべてのカスケーデイング処理が終わった後，スタイルの継承が 
処理されます.それでも指定されていないブロパティがあれば， CSS 仕様に定められる初期値 
が^*用されます）. 


►優先順位… 「 WWW ブラウザ J <「ユーザ（読者)」< 「 HTML 文書作成者」 

► 宣言が衝突した場合…優先順位が高い方の宣言を採用 
► 宣言が衝突しない場合…単純にそれを採用 

この処理には以下の利点が挙げられます. 

• 読者もスタイル調整に参加できる 

•文害作成者が指定しなかったプロパティに関しては，読者が普段憒れ親しんでいるスタイル 
に併せることができる 


カスケーデイング処理の例： 

WWW ブラウザ標準： 

BODY{ 

line-height: lem ； 
color ： black ； 

} 


ユーザ（読者）標準： 

BODY{ 

line-height : 1.3em ； 
color: white; 
background : black ； 

} 
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HTML 文書作成者指定： 

BODY{line-height : 1.5em} 

採用される値： 

BODY{ 

line-height: 1.5em ； /* 作成者の値*/ 

color ： white ； /* ユーザ （読者）の値*/ 
background : black ； /* ユーザ （読者）の値*/ 
} /* そのほかのものは，初期値が採用される •/ 


ただし，スタイル宣言に riimporiantj キーワードをつけた宣言に関しては，優先順位が変 
ります. 「HTML 文書作成者」< 「!importam 付き HTML 作成者」< himportant 付きユーザ（読 
者)」となります（これは CSS2 の什様です. CSS1 では， 「HTML 文, 1 !:作成-名•」< himportant 付 
きユーザ（読者)」< 「!important 付き HTML 作成者」となっていました）. 

WWW ブラウザ標準： 

BODY{line-height ： lem> 


ユーザ（読者）橡準： 

BODY{ 

line-height:l.3em !important; 
color: black; 


HTML 文 a 作成者指定： 

BODY{ 

line-height : 1.5em; 
color ： red ； 

} 

採用される値： 

BODY{ 

line-height : 1.3em ； 
color ： red; 


CSS1 および 2 の仕様 S は， WWW ブラウザ標準スタイルシートに! important をつけた 
^ 場合については言及していません. 
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ところで，指定にクラスや ID が絡んでくると，処理は複雑になります.本書では，このケ 
ースに関しての解説は省略します. 


物 S) 


1つのシートは，いくつかの関連する指定を含んでいるのが普通です.たとえば.前景色 
と背祭色は，互いに色が衝突しないよろに指定されるのが普通です. Nmport はこのよう 
なパランスを崩す可能性のある指定であり，その記述には十分な注意を払うようお願いし 



これまでのところ ， Netscape Navigator や Internet Explorer の摞準的な見栄えでは.行幅に余裕があり 
ません.行幅はスタイルシートによって自在に変更できるのですが，いまだシートを使っていない HTML 
文霱も数多く公開されています.文*作成者がシートをつけてくれるのを待つよりも.自分で「ユーザ（読 
者）標準スタイルシート J を用意してしまうほうがきいでしょう. 

筆者が使っている「ユーザ（読者）棵準スタイルシート J は，次のように簡単なものです.これ以上ごち 
やごちやと指定してしまうと. HTML 文書作成者のシートとの兼ね合いがうまく行かなくなつてしまうから 
です. 
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■1 一 ■一 -ニニー^- ••• - v 

HTML 文書との 

4-3 

連携 


スタイルシートと HTML 文畨の連携に関する取り決めは， CSS の仕様ではなく HTML の仕 
様の範疇に入ります. HTML 4.0 の仕様には， CSS だけでなく，ほかの仕組みのスタイルシー 
卜を包括した「スタイルシートとの連携方法」が記載されています （2.0, 3.2 の仕様の 
HTML 文害でも，同様に LINK 要素を用いてスタイルシートと速携させられると考えてもよ 
いでしょう）. 

#4.3.1. 連携方式の分類 

HTML 4.0 は，スタイルシートの速携方式を3つ想定しています.機能的な違いは「いつ有 
効になるのか」だけです. 


► persistent (永続）スタイルシート 

常に有効になるスタイルシートです （ WWW ブラウザのスタイルシート機能をオフにした 
ときだけ， persistent シートもオフになります）. 


► preferred (おすすめ）スタイルシート 

ユーザが何も指示しない場合に限り有効になるスタイルシートです. HTML 文杏読み込み時 
にはすベて有効になっていますが，特定のタイトル名のシートだけを有効にするよう切り替 
えることが可能です. 


► alternate (代替）スタイルシート 

ユーザがとくに指示した場合に限り有効になるスタイルシートです. HTML 文書読み込み時 
にはすベて無効になっていますが，特定のタイトル名のシートだけを有効にするよう切り替 
えることが可能です. 
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#4.3.2. LINK 要素で外部スタイルシートと連携 

LINK 要素を用いれば，独立したファイルとして保存されているスタイルシートをその文書 
と連携させることが可能です.ファイル名は HREF 属性で指定します.シートとの連携方式は， 
REL (Forward Relationship ) 属性と TITLE 属性をもちいて指定します.スタイルシートの種類 
は TYPE 属性で ( CSS であれば “ text / css ” と）指定します. 

• シートのファイル名 . HREF 属性 

• シートとの連携方式 . REL 属性と TITLE 属性 

•シートが CSS であることの明示 ••••！¥?£ 属性 

► fREL =" STYLESHEET"J とする場合 
TITLE 属性を省略したものは persistent (永続）スタイルシートになります. 

TITLE 属性を明示したものは preferred (おすすめ）スタイルシートになります. 


► rREL="ALTERNATE STYLESHEET "』 とする塌合 
alternate (代替）スタイルシートになります. TITLE 属性を明示しなければいけません¬ 
く！ doctype HTML PUBLIC B -//W3C//DTD HTML 4.0//EN"> 

<HTML> 

<HEAD> 

<TITLE>HTML4.0 (W3C Recommendation 18-Dec-1997) 解説 </TITLE> 

<LINK REL=■STYLESHEET■ TYPE=-text/css - HREF=■normal.css■> 

<LINK REL=■STYLESHEET■ TITLE="fancy■ TYPE=_text/css■ HREF=■fancy.css■> 

<LINK REL="ALTERNATE STYLESHEET" TITLE=■compact■ TYPE=*text/css" HREF="small.css"> 
<LINK REL="ALTERNATE STYLESHEET - TITLE=■compact■ TYPE= - text/css - HREF="mini.css■> 
</HEAD> 




WWW ブラウザは.読み込んだ HTML 文書にスタイルシートファイルが指定されている 
場合，そのシートも自動的に読み込みます.そして，連携方式を判断し，適切なシートだ 
けを有効にした上で表示を調整します. 


#4.3.3. 有効スタイルシートの切り替え 

preferred (おすすめ）および alternate (代替）のスタイルシートには， TITLE 属性によって 
タイトル名が指定されています.ユーザは，その中の特定のタイトル名を指示することによ 
って， 有効になるスタイルシートを切り替えることが'可能です. 

特定のタイトル名が指定された場合，そのタイトル名でない preferred (おすすめ）スタイル 
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シートは無効になり，そのタイトル名の alternate (代替）スタイルシートは有効になります. 
なお ， persistent (永続）スタイルシートは常に有効です. 


<LINK REL="STYLESHEET" TYPE= B text/css B HREF=-normal. CSS■> 

<LINK REL="STYLESHEET - TITLE="fancy■ TYPE= B text/css - HREF=■fancy.css■> 

<LINK REL="ALTERNATE STYLESHEET" TITLE="compact■ TYPE=_text/css■ HREF="small .CSS - > 

ITLE=V 


<LINK REL="ALTERNATE STYLESHEET" TIQ 


■ compact■ TYPE=_text/css■ 


HREF=-small 
HREF="mini. 


css"> 


この例の場 A , 文與読み込み時には persistent (ここでは normal . css ) と preferred (ここでは 
fancy . css ) の2つのスタイルシートが有効になっています.ユーザの指示により rcompactj が 
選択されれば， prefrrcd と alternate のうち 「 compact 」 のタイトル名を持つスタイルシート（こ 
こでは small . css と mini . css ) に加えて persistent が存効になり，ほかのシートは無効になります. 

なお，複数のスタイルシートに同じタイトル名を付けた場合，そのシート群は同時に有効/ 
無効になります. 

存効スタイルシートの切り待えをどのような方法で行うのかは WWW ブラウザに一任され 
ています.プルダウンメニューの一覧から選ぶ，別ウィンドウに示されるリストから選ぶな 
どの バリエーションが考えられます（図 4-8). 


図 4-8. スタイルシート選択ウインドウ（想像図） 





どのような方法をとるにせよ. CSS 対応を名乗る WWW ブラウザは，少なくとも指定さ 
れているスタイルシートのタイトル名 一覧 （ファイル名ではない）をユーザに提示できな 
ければいけません.それにもかかわらず ， Netscape Navigator 4 .0. Internet 
Explorer 4.0 はスタイルシート選択機能をサボートしていません. 


©4.3.4. 複数のスタイルシート間で宣言が衝突した場合 

複数のスタイルシートが有効になっている場合には，シート間で宣言が衝突する可能性が 
あります.衝突した場合には，単純に HEAD 要素中での出現順位がもっとも後ろである宣言 
のみが有効になります（「4.1.4.宣言が衝突した場合の処理」を参照). 
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#4.3.5. 有効メディアの区別 

HTML 文書の再生メディアは，必ずしもコンピュータのスクリーン（ページの継ぎ目はなく， 
表示しきれない部分はスクロールバーによって調整する）であるとは限りません.場合によ 
っては音声出力（スピーチ•シンセサイザー）であったり印刷（ページの物理的な区切りに 
制約される）であったりしても何の不思議もありません. CSS 2 の仕様書には，表 4-1 に示す 
メディアの槐類が紹介されています. 


表 4-1. スタイルシートのメディア指定 


SCREEN 

スクロール可能な（ページの区切り目の無い）コンピュータ画面 

TTY 

テレタイプや端末画面など.固定ピッチ文字によるコンピュータ画面 

TV 

家庭用 TV セットのモニタ 

PROJECTION 

投影機 

HANDHELD 

小型情報機器（画面サイズや色に制限が多いもの） 

PRINT 

紙.あるいはページ区切りのあるコンピュータ画面 

BRAILLE 

点字（ページ区切りなし） 

EMBOSSED 

点字（ページ区切りあり） 

AURAL 

音声出力（スピーチ • シンセサイザー） 

ALL 

すべて 


冉生メディアが異なれば，望ましい再生スタイルも異なります.したがって，スタイルシ 
一卜はメディア別に指定されているべきです.その指定は， LINK 要素に MEDIAE 性を指定 
することで実現されます （1 つのスタイルシートに複数のメディアを指定する場合は，カンマ 
(，）で区切って並べます）. 

く LINK REL="STYLESHEET - MEDIA="ALL" TYPE= B text/css" HREF=-normal.css■> 

<LINK REL=-STYLESHEET' MEDIA= M AURAL" TYPE=_text/css■ HREF="normal-vox.css■> 

<LINK REL="STYLESHEET- TITLE=■fancy■ MEDIA="SCREEN" 

TYPE="text/css" HREF=■fancy.css■> 

<LINK REL="STYLESHEET" TITLE=■compact■ MEDIA 二 " SCREEN, HANDHELD" 

TYPE="text/css" HREF=■small.css■> 

<LINK REL=-ALTERNATE STYLESHEET* TITLE= B slow-vox' MEDIA="AURAL" 

TYPE=■text/css" HREF=■slow-vox.css■> 

もし， WWW ブラウザが音声出力用に設定されていれば， AURA しと ALL 以外のメディアの 
スタイルシートは常に無効になるでしよう.この場合は persistent (永続）として normal.css と 
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nomal-vox.css が， alternate (代替）として 「slow-vox (slow-vox.css) 」のみが採用されるでしよ 
う （Netscape Navigator4.0, Internet Explorer4.0 はメデイア選択機能をサポートしていません）. 
なお， MEDIA 域性は省略可能ですが，省略した場合にそのシートがどのメディア用のシート 
として解釈されるのかは WWW ブラウザに一任されています. 

#4.3.6. STYLE 要素で文書内にスタイルシートを記述 

HTML4.0 からは， HTML 文書内にスタイルシートを直接記述するための STYLE 要素が用意 
されています. LINK 要素と同様に， TYPE 辑性， MEDIA 属性， TITLE 厲性を指定できます. 


<HEAD> 

<TITLE>test</TITLE> 

く STYLE MEDIA="ALL" TYPE="text/css"> 
BODY{ 

color ： white ； 
background : black ； 

} 

く / STYLE 〉 

</HEAD> 


HTML4.0 の仕様 S には， STYLE 要素におけるシートとの連携方式に関して何も明言され 
^ ていません.しかし，このシートは文 B の一部であることから，常に有効になる 
(persistent である）と思われます.なお，今のところ Netscape Navigator4.0 や 
Internet Explorer4.0 はそもそもシート選択機能をサボートしていないので.どちらにせ 
よ STYLE 要素のシートを常に有効にします. 


@ip^> 


HTML3. 2では STYLE は单なる予約語であり.具体的な取り決めは行われていませんで 
した.そのため TYPE 属性などは定義されていません. 




LINK 要素と STYLE 要素の使い分け 

スタイルシートは一般に独立したファイルとするのですが. STYLE 要素を用いれば HTML 文8内に直接 
S き込むことも可能です.この2つはどのよラに使い分ければよいのでしよラ. 

独立したファイルとして作成したスタイルシートは， LINK 要素を介して複数の HTML 文醫から使用でき 
ます.しかし， STYLE 要素に記述したスタイルシートは，その HTML 文書からしか活用できません.した 
がつて.使いまわしの効くスタイルシートは独立ファイルとし，特定の HTML 文籮でし力嘀えないような 
特殊な指定をしたシートは STYLE 要素に記述するのか*®い使い分けだと考えられます. 
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スタイルシートをコメントアウト 

HTML 3.2 以上の仕様を解釈しない WWW ブラウザは， STYLE 要素の中身を単なるテキストとして表示 
してしまうかもしれません. W 3 C は，それを避けるために， STYLE 要素の中身を HTML 文軎としてコメン 
トアウトするよ5提案しています. 

<STYLE TYPE= B text/CSS"> 

<! —— 

BODY{ 

font : 400 medium serif ;/* 太さ 400， サイズ 普通， ひげ付き文字 */ 
text-align ： left ； 

} 

-- > 

</ STYLE 〉 

なお，あくまでも rHTML 文蠢としてコメントアウ H ですから，く!—>です.パ〜*/だと， rcss 
としてコメントアウト J になり，宣言がすべて無効になります. 


#4.3.7. 開始タグ中にスタイル宣言を埋め込む 

HTML4.0 からは， BODY 要素に含まれる （SCRIPT と PARAM を除く）すべての要素に 
STYLE 诚性があり，诚性侦としてスタイル宣言を記述できます.この方法は，例外的•局所 
的なスタイル宣言を追加するために利用できます. 

<H3 STYLE=" color s red; font-size ： 1• Sem 11 〉〕 •1•1.HTML に関して </H3> 

<H4 STYLE= - text-align ： center- >/HTML とは / </H4> 

<P>HTML (hypertext markup langauge) とは， ".</P> 




文法的には， LINK 要素や STYLE 要素を使用せずにすベてのスタイルを STYLE 属性で指 
定することも可能です.しかし.筆者はスタイル指定が HTML マークアップ内部に入り 


込むのは望ましくないと考えています.強制ではないのですが， STYLE 属性による局所 


指定は最小限にとどめるよろ希望します. 
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CSS prc^erties for 
visua^e^ia in 


5 章では， CSS が規定する個々のブロパテイ （ property ) に 
関する解説を行います. 5章を暗記する必要はありません • 5 
章は「辞書』としてお使いください.なお，プロハ°テイの総合 
的な使い方は6章に譲ります. 


Chapters CSS properties 





リファレンスの 

読み方 


ドの特徴に着目して再生メディアを分類します. 



着眼点 


区分 


大区分 

画像 ( visual ). 音声 ( aural ), 接触 (tactile :点字など） 

ページ区切り 

ある ( continuous ), ない ( paged ) 

画素 

グリッド (grid :文字端末など).ビットマップ ( bitmap ) 

対話性 

ある ( interactive ), ない (static :印刷物など） 



多くのブロパティは複数のメディアで共通ですが，中には「音声再生専用のブロパティ」 
なども存在します.なお， CSS 1 が用意したのは， 「 visual で continuous のみ，あるいは paged と 
共通」のブロパティです. CSS 2 で追加されたのは 「 aural 」「 visual で paged 專用」のブロパテ 
ィです.そして，読者の興味の大部分は CSS 1 相当の区分に集中しているものと思われますし， 
実装が進んでいるのものこの区分です.そのような都合から，本章で詳細に取り扱うのは 
「 visual (主に CSS 1 相当）」とし，その他の CSS 2 追加ブロパテイについては7章 「new feature in 
CSS 2」 にまわします. 

なお，本#のブロパテイ定義欄の記述は， W 3 C の仕様をもとに，読みやすくするために力 
ツコなどを追加したものです.表記が変更されていても内容は変更されていませんので，あ 
らかじめご了承ください. 

#5.1.1. 値定義の読み方 

この章では，次の形式で各ブロパテイを紹介していきます. 


marqin-left 左マージン 

偃 

初期値 
適用対象 
継承される？ 

パーセントの意味 
マイナス値 


<一般サイズ> I くパーセント > 丨 auto 
" auto …自動処理 V 
0 

全要素 
no 

親要素の width に対する割合 
可 















5.1 リファレンスの読み方一 < 


値の定義では，次の特殊な記号を使用します. 

♦原則 

•指示した順に，一度だけ記述 

•キーワード…基本的にそのまま記述.カンマ （,） やスラッシュ （/) などもキーワードにな 
りうる. 

• 17* 7」…筆者が付けたコメント 


♦選択回数の明示 

• 「丨」•••グルーブから一つだけ記述 


_ ぬ 


和 

font-style ( 斜体） 

値 normal 1 italic 1 oblique 

正しい 解釈： font - style : normal ; 

font - style : italic ; 

間違つた解釈： font - style : normal italic ; /* 二つは霤けない*/ 

font - style : " normal ": /* キーワードには••"を付けない*/ 

f 

,、_ 


F ■ 

• 「[]」…グループ範囲の明示 

• 「 II 」…グループから， 順 不同で 複数 記述可能，ただし同じキーワードは 一度 だけ 

w 

き 

£ 

text-decoration 下線など 

W 

\ 

値 none 1 [ underline II overline II line-through II blink ] 

正しい 解釈： text - decoration : none ; 

text - decoration : blink underline ; 

間違つた解釈： text - decoration : none underline ; /*none は | | のグルーブではない*/ 

text - decoration : underline overline underline ; /*2 度は■かない*/ 

K - ^ 

脅 

4 

♦値の説明の明示 

• 「< >」…書くべき値の説明（本文中で説明).パーセント， url , 色など. 

w 

唸 

4 

f color 前景色（文字色） 

f 

値 < 色> 

正しい 解釈： color : # fff ; 

color : rgb (0, 0, 255); 
color : red ; 

間違った解釈： color : < red >: /* 0はいらない*/ 

% - A 


w 


111 





Chapters CSS properties for visual media in detail 


♦記述回数の明示 

• r*j …〇回以上繰り返し 
• 「？」…0か1 

_ _^ 

% 

7 

，を 

font フォント関連の一括指定 

¥ 

各 

値 [く fc 

く for 

/*lin 

/*for 

正しい解釈： font 

font 

間違った解釈： font 

font 

^_ 

> nt - style > II < font - variant > II < font - weight > ]? 
t - size > [ / < line - height > ]? < font - family > 

e-height の直前のスラッシュは，そのままスラッシュとして記述*/ 
M-size と font-family だけは必須*/ 

7001 5 pt serif ; 

italic 1 0 pt /1.5 sans - serif ; 

normal serif ; /* font - size は省 ffi できない ★/ 

lOpt 1.3 serif ; / nine-height の直前には r/J が必須*/ 


P -^ 

w 


#5.1.2. 「適用対象」の考え方 

どの要素にも，すべてのプロパティを指定可能ですが，全部が適用されるとは限りません. 
たとえば， text-align (水 f •位 [? i そろえ）はインライン系袈ぶ （ STRONG 费ぶなど）には適川さ 
れません（なぜなら，適川しようがないからです）.このように， CSS では，対染要索がブロ 
ック系贤ぶであるかインライン系袈ぶであるかによって，ブロパティを適川するかどうか判 
断します. 

なお，その所 W の初期設定は HTML の仕様で定められているとおりですが，スタイルシー 
卜の display プロパティ （5.8 節）によって，表示形式だけは変更可能です.したがって，敝密 
には，各ブロパティが適用されるか否かは display ブロパティの値で判断されます. 

CSS では，特殊なインライン系要ぶとして「跔換要素」を想定しています.胙換要素とは， 
IMG 要素など，ソース中の文字列が肉像などに！？？きかえられた後に表示されるものです.ブ 
ロパティによっては，「的換要素」の場合には意味合いが変化します（たとえば width ブロパ 
ティ： 5.7 節）. 


#5.1.3. CSS 1 と CSS 2 の違いについて 

CSS 2 は， CSS 1 の上位互換の仕様として作成されました.すなわち， CSS 1 のブロパティは 
すべて CSS 2 でも採用されてぃます.したがって，とくに何も明示しなぃ限り，この章で紹介 
する ブロ パティは共用です.しかし，実際には 一部の プロパティ につぃて 改変が行われまし 
た.その場合は，必ずその旨を本文中に明示してぃます. 

また， CSS 2 では，すべてのプロパティの値に 「 inherit 」 を導入しました （4.2 を参照）.これ 
は CSS 1 には存在しなぃキーワードであるため，本書ではあえて inherit を値リストに表示しま 
せんでした.これについてはご注意ください. 
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5.2 「一般サイズ』単位の解説一< 


\w 囑 y, pn^p^i 





『一酿サイズ』单位 
の解説 


いくつかのブロパテイに共通して使われるサイズの単位に関して，あらかじめここで説明 
しておきます. 

#5.2.1. 絶対単位 

絶対增位とは，サイズを絶対尺度で指定する単位です（表 5-1). 


表 5-1. CSS における絶対単位 





mm 

ミリ メー トル 


cm 

センチメートル 

1 cm =1 0 mm 

in 

インチ 

1 in = 25.4 cm 

Pt 

ポイント 

72 pt =lin 

pc 

パイカ 

組版用語. 1 pc =12 pt 


(Lie and Bos ⑴より） 


#5.2.2. 相対単位 

「現在の文字サイズ」を意味する em (エム ）， ex (エックス）と，「画面の解像度に依存す 
る 」 px (ピクセル）は，状況によってサイズの変動する単位，すなわち相対単位です. 

remj はもともとは組版用語で，アルファベット M のサイズ，転じて「文字を描画するの 
に必要な高さ」を意味しています. CSS では『その要素における』フォントサイズそのもの 
として扱われます.たとえば， 「 line - height : 1.5 em 」 は，フォントサイズが 14 pt ならば 21 pt に， 
10 pt ならば 15 pt に設定されます. 

x font - size プロパティのみ，例外的に em ユニットを「親要素のフォントサイズ」として 
♦ノ 取り扱います. 
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横方向の指定にも em ユニットは活用されますが，その際でも em ユニットは「フォント 
の高さ j に相当します.文字は必ずしも正方形ではないのでご注意ください.日本での 
em の組版における意味合いは「全角文字の幅 j となっています（新フォント関連用語 
集：財団法人日本規格協会）.この訳だと「縦幅』なのか『横幅 j なのか明確ではない 
ため.本書は「高さ』と表現しました.もっとも. CSS ではあくまでも r その要素にお 
ける J フォントサイズそのものとして扱われます. 


rexj はその要素のフォントサイズにおける 「 x - height 」 の大きさです（図 5-1). フォント 
ファミリーが異なれば，同じフォントサイズでも ex 値は変ります. 「 x - heightj の値は，フォ 
ントデータそのものに含まれています ( rx - heightj という概念はラテンアルファベット圏のも 
のであり，日本語文字では利用されません）. 


図 5- 1 . x-heiaht 



x-neight 


フォントサイズに対する各成分の比率は 
フォントファミリーによって異なる 



px はピクセル，すなわち画面に表示できる妓小の®素のサイズです.同じサイズのディス 
ブレイでも，解像度設定 （640 X 480 とか， 800 X 600 とか）によってビクセルのサイズは変化 
します. 

#5.2.3. バーセント 

単位「％」は，サイズをパーセントで指定するものです.ただし，「何に対するパーセント 
なのか」はブロパティによって異なります.たとえば， width ブロパティでは表示領域の横幅 
に対するパーセントを， font - size ブロパティではその親要素の文字サイズに対するパーセント 
となります.詳しくは各ブロパティの単元で説明します. 
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©5.2.4. 比率指定の継承に関する注意 

em ユニットと％による指定が継承される場合は， 相当する絶対値に変換された後に 継承さ 
れます.次の例の場合， P . START の font - size は 12 ptX 1.2=14.4 pt であり，その子要素は 14.4 pt 
を継承します. 

ところが，相対値として継承されるとすると，次の例では P , CITE , STRONG の順に文字 
が大きくなってしまいます. 


<STYLE TYPE= B text/css■> 

BODY{font-size: 12pt) 

P.START {font-size: 1.2em} 

</STYLE> 

<BODY> 

<P CLASS=_START"> 最近読んだ窬籍 <CITE > 「ミュージックマガジン 
<STRONG>10 月号 </STRONG>J </CITE> では，興味深い特集が組まれていた . </P> 
</BODY> 


(この文脈では， CITE は P から指定を継承し， STRONG は CITE から継承します.） 


継承が「計與結果 j の塌合の継承結果： 

CITE{font-size :14 .4pt} 

STRONG{font-size ： 14.4pt} 

継承が f 相対性 j の塌合の継承結果： 

CITE{font-size: 17.28 pt /* 14.4*1.2=17.28pt */) 
STRONG{font-size: 20.736 pt /* 17.28 #1.2=20.736pt */> 
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フオント系 


► 単体指定 


font-family . フォントファミリー 

font-size . サイズ 

font-weight . 太さ 

font-style . 斜体 

font-variant . スモールキヤビタル 

line-height . 仃 fe 


► 一括指定 
font 


► CSS 2 追加分 

font-stretch . 

font - size-adjust ■ 


BODY{ 


横方向の引き延ばし 
サイズ修正 

















5.3 フォント系一之 


#5.3.1. 単体指定 


\ ※ font - family フオントファミリー 

値 

[[くファミリー名 > 丨く系統名 >],]* [くファミリー名 > 丨く系統名〉] 

初期値 

実装依存 

適用対象 

全要素 

^継承される？ 

v es i 




•:'ノ 


(灾装依存とは， WWW ブラウザが適切な侦を選択する.という ffi 味です） 


専門用語の敝密な解説はしませんが，丨フォントファミリー名」とは "Times New Roman ••や 
•• Century ••のような名前です（ファミリー名は定義済みのキーワードではありませんので，クォ 
ーテーシ ヨン （••"あるいは"）で囲みます）. 

• このブロパティには複数の値を指定できます.複数の指定がある垛合， WWW ブラウザは 
前者から順に所有するファミリーを探し，砬初に見つけ出したものを採用します. 

font-family ： ■Times Roman", "Times' serif; 

/* まず " Times Roman" を探し，無ければ " Times" を，それも無い塌合は serif を */ 


また，“ファミリー名"ではなく， ファミリーの一般的な性質を示唆する"系統名" 
( generic - family ) でもファミリーを指定できます （表 5-2). 系統名で指定した場合， WWW ブ 
ラウザが存在するファミリーの中から適切なものを選択します.一般に，文#の読み手がど 
んなファミリーをもっているのか推測することは不可能なため，系統名を利用する方が望ま 
しいでしょう （系統名は 定義済みのキーワードであるため， クオーテーシヨンでは囲みませ 
ん. 囲ってしまった場合は， " serif •などという特定の名前のファミリーを指定したことになり 
ます). 


表 5-2. 系統名とその説明 


系統名 

意味 

具体的なファミリーの例 

serif 

ひげ付き 

"Times Roman" 明朝系 

sans-serif 

ひげ無し 

"Arial" ゴシック系 

monospace 

等幅 

"Courie" 

cursive 

手書き風 

'Zapf Cfumcery' 楷書 

fantasy 

装飾付き 

"©0_" POP 文字 
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media 


と指定しておけば，太さ 700 の HI 要素中に現われた塌合でも. 400の P 要素中に現われた塌合でも.常 
に「親要素よりも太い J という関係がキープできます. 


「 xx - small 〜 xx - large 」 は文脈に依存しない固定サイズ指定で，この順に大きくなります- 
ただし#!:体的なサイズは WWW ブラウザの設定に一任され ます ( CSS 2 では，それぞれの関 
係は，小さいほうから大きいほうへ「1.2倍程度」だとされています). 

「 larger 」「 smaller 」 は相対指定で，親要素のサイズよりも一段階大きく（小さく）なります¬ 
この 「一段」がどの程度かは WWW ブラウザに一任されますが，基本的には 「 medium 」 が 
「 large 」 に （「 small 」 に）なるのと同程度の変化だと思われます.なお，継承されるときは相 
当する絶対値として継承されます. 


相対指定のススメ 


相対指定はインライン系要素にとってはとくに重要です.たとえば. STRONG 要素に対し 


STRONG{font-size :1 •2em} 


と指定しておけば.フォントサイズが 15 pt の H 1 要棄中に現われた埸合でも.1 0 pt の P 要素中に現われた 
塌合でも，常に「親要素のフオントサイズの 1.2 倍 j という関係を自動的にキープできます. 

同様に， 


「大きさ』に上限はありません. xx - large よりも大きなサイズになることも可能です. 
M 、 ささ j は0が下限です. 


font - size サイズ 


値 

xx-small 1 x-small 1 small 1 medium 1 large 1 x-large 1 xx-large i 
larger 1 smaller 1 < 一般サイズ > 丨くパーセント〉 

初期値 

medium 

適用対象 

全要素 

継承される？ 

yes 

パーセントの意味 

親要素の font - size に対する割合 

マイナス値 

^- 

不可 

-^ 


STRONG{font-weight : bolder} 





フオント系 


font-weight 太さ 


値 normal I bold I 100 I 200 I 300 1 400 1 500 I 600 I 700 I 800 I 900 1 

bolder I lighter 

/* 100が最も細く， 900 が最も太い.*/ 

"nomal = 400. bold = 700*/ 

"250などは指定できません.*/ 

初期値 normal 

適用対象 全要素 

継承される？ yes 


「100〜900」は太さの絶対サイスで，これ以外の値（たとえば 250) は指定できません•た 
だし，実際の表示として9段階の太さが区別できるかどうかは WWW ブラウザおよびフォント 
に一任されます. 

「 bolder」r lighter J は相対指定で，親要素の指定よりも一段階太く（細く）なります.この 
「一段」は WWW ブラウザに任されますが，「400」が「500」に（「300」に）なるのと同程度 
の変動が期待できます（上限は900,下限は100です).なお，継承されるときは相当する絶対 
侦として継承されます. 


※ font-style 斜体 

値 

normal 1 italic 1 oblique 

初期値 

normal 

適用対象 

全要素 

継承される？ 

y es 冷 



本語では同じ「斜体」と受け取られがちですが, 
:は，この2者が区別されます（表 5-3). 


oblique の恿味 


表示例 説明 




専用斜体.ノーマルとは文字形状まで巽なる. 
串純斜体.ノーマルが单に傾いた文字形状. 


^ ront-variant 

スモール キヤビタル 

値 

normal 1 small-caps 

初期値 

normal 

適用対象 

全要素 

^継承される？ 

v es . 









Chapters CSb properties for visual media in detail 


small - caps を指定すると，“小文字”で書かれたテキストがスモールキヤビタル文字に調整さ 
れます（図 5-2). なお，この概念は日本語文字には存在しません. 


図 5-2. スモールキヤビタルの例 

<PxSPAN CLASS= ■ FAMILYNAME - >Zappa</SPAN>, Frank 


Zappa , Frank 




■# 


※ line-height 行 幅 


値 

初期値 
適用対象 
継承される？ 
パーセントの懑味 
マイナス値 


normal I く掛ける値> I く一般サイズ> I くパーセント 
/* パーセントと掛ける値の継承の違いに注蕙 V 
normal 
全要素 
yes 

その要素自身のフォントサイズに対する割合 
不可 


行幅（行送り）は，上下に均等:こ割り振られます.文字そのものの幅も含んだ値を指定し 
てください（図 5-3). 


図 5-3. line-height 


{ line - height : 1.4 em } の場合 

0.2 em 

— 

ABCKjp 

I.Oem 


_ 

0.2 em 



<掛ける値>は，「その要素のフォントサイズの何倍を行幅にするか」を無単位の実数で記 
述します. 



く掛ける値〉の効果は， em ユニットとまったく同じです.ただし，継承のされかたが異なります. 
5.2 節で説明したとおり， em およびパーセントは相当する絶対値に変換された後に継承され 
ます.しかし， line - height のく掛ける値〉は常に相対値として継承されます.この2つは，望 
む効果に応じて使い分けなければなりません（図 54). 

• em , %を用いた場合…子要素の（強調などで）文字サイズが変っても，行幅は同じ 

• <掛ける値〉を用いた場合…子要素文字サイズが変れば，行幅もかわる 
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5.3 フォント系一ぐ 


図 5-4. 行幅の継承の違い： em , 掛ける値 


全て同じサイズ 

Test Test Test Test 
Test Test Test Test 
Test Test Test Test 
Tesc Test Test Test 
Test Tesc Test Test 
Tesc Tesc Tesc Tesc 
Test Test Test Test 


文字サイズにかかわらず一定 

Test Test Test Test 
Test Test Test Test 
Test Test Test Test 
Tesc Test Test Test 
Test TGS tTesc 
Test Test Tesc Tesc 
Tesc Test Test Test 


文字サイズに相対的に変化 

Tesc Test Test Test 
Test Test Test Test 
Tesc Test Test Test 
Test Test Test Tesc 

Test TeS trest 

Test Tesc Test Test 
Test Test Tesc Test 
Test 


©5.3.2. —括指定 


一括指定プロパティ（ショートハンド•ブロパティ）は，閲連するブロパティを一括して 
指定するためのブロパテイです. 


%- 




^font 


値 


初期値 
適用対象 
継承される？ 

パーセントの意味 


[< ront - style > II < font - variant > II < font - weight > ]? 

< font - size > [ / < line - height > ]? く font - family 〉 

/* line - height の直前のスラッシュは.そのままスラッシュとして記述*/ 
/* font-size と font-family だけは必須 V 
個々のブロパティの初期値 
全要素 
yes 

個々のブロパテイのとおり 


一括指定ブロパティの場合，値指定を谷略した個々の部分は， r 初期値を明示した j と解釈 
されます のでご注意ください.たとえば， 


{ 

line-height ： 1.5; 
font: l2pt sans-serif; 

} 

は， 

{ 

lme-heignt ： 1.5; 

font: nomal nomal nomal 12pt/nomal sans-serif ； 


として解釈されます.そのため， font ブロパテイ以前に指定していた line - height の指定は無効 
になります. 
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® 5.3.3. CSS2 追加分 



font-size (フォントの高さ）に対する横の割合の指定をするものです（図 5-5). 通常が 


nomal ， ultra - condensed がもっとも狭く， ultra - expanded がもっとも広くなります.なお，具体的 
な比率は規定されていません. 
wider と narrower は，親费ぶに対する相対指定です. 

図 5-5. font-stretch の適用例 


condensed normal expanded 



同じ font - size であっても， font - family が異なればサイズが違うように感じることがあります. 
その原因は， x - height の違いにあります.そこで， font - size を x - height の違いに合わせて修正す 
るために， font - size - adjust ブロパティを用います. 


font - size - adjust は， font - family を複数指定した場合にのみ利用します. font - size - adjust の値に 
は， font - family で指定したファミリーの z 値（すなわち， font-size -r x - height ) を設定します. 
WWW ブラウザは，実際に選択されたファミリーの z 値を用いて，以下のように font - size を修 
正します(図 5-6). 
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修正後の font-size = font-size*font-size-adjust/ 採用されたファ: 
6. フォントサイズ修正結果例 


Verdana: 1 

xylophone synergy diaphragm partially hydrogenated 
vegetable shortening or lengthening or resting 

Comic Sans MS: 1.07 

xylophone synergy diophragm partiolly hydrogenated 
vegetable shortening or lengthening or resting 

Trebuchet MS: 1.09 

xylophone synergy diaphragm partially hydrogenated 
vegetable shortening or lengthening or resting 

Georgia: 1.16 

xylophone synergy diaphragm partially hydrogenated 
vegetable shortening or lengthening or resting 

Myriad Web: 1.2 

xylophone synergy diaphragm partially hydrogenated 
vegetable shortening or lengthening or resting 

Minion Web: 1.23 

xylophone synergy diaphragm partially hydrogenated 
vegetable shortening or lengthening or resting 

Times New Roman: 1.26 

xylophone synergy diaphragm partially hydrogenated 
vegetable shortening or lengthening or resting 

Gill Sans: 1.26 

xylophone synergy diaphragm partially hydrogenated 
vegetable shortening or lengthening or resting 

Bernhard Modern: 1.45 

xyloplionc synergy diaphragm partially liydrogcnalcd 
vegolal)lc sliortening or lengllioning or reslirtg 


Caflisch Script Web: 1.57 
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このプロパティはフォントデータに Z 値が含まれていること， WWW ブラウザがその値を 
判別できることを前提にしています . 今のところ . 一般向けの WWW ブラウザではこの 


よラな芸当はできません . 


※ font _-缉指孝_ 

値 [ 

[ く ’ font-style_> II <'font-variant'> II < ’font-weight 1 > ]? 

く ' font-size'〉[ / <'line-height'> ]? <'font-family 1 〉 

] 

I caption I icon I menu I message-box I small-caption I status-bar 
初期値 個々のブロパティの初期値 

適用対象 全要素 


継承される？ yes 

パーセントの意味 個々のブロパテイのとおり 


CSS2 では font プロパティの指定方法として，「システムフォント設定を指定する」方法が追 
加されました（なお， CSS2 での追加ブロパティが指定内科に組み込まれていないことに注意 
してください ）. 

カツコ丨 ] の位既に注目すると分かりますが，指定は 「 CSS1 と同じようにする」と「システ 
ムフォント名を記述する」のどちらか一方しか選べません.システムフォントを指定した場 
合は，フォントサイズなどを細かく指定できないことになります.もし調整を行いたいなら 
ば， font ブロパテイより後で font-size ブロパティなどを活用してください（一括指定は，そ 
れまで行われた指定をすべて上迸きしてしまいます . したがって，「後に」宣言しなければな 
りません ）. 


font : caption ； 

font-size: lem ； /* 上害き指定 */ 
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5.4 色と背景効果系 一 < 


5-4 色と背景効果系 


► 単体指定 

color. 前景色（文字色） 

background-color. 背景色 

background-image. 背景画像 

background-repeat. 背景画像の繰り返し制御 

background-position. 背景表示位置 

background-attachment. 背景スクロール 


► 一括指定 
background 


► CSS2 追加分 
システムカラーという概念 


BODY{ 

color ： # fff ； /*white*/ 

background : #000 url(backl.gif); / 傘 black, image 傘 / 

} 

STRONG{ 

color ： red; #f00, rgb(255, 0, 0) 傘 / 

) 

Hl{ 

background: #faa url(heading.gif); 

/* 要素ごとに背景を変えられる*/ 

} 
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.4.1. 单体指定 


※ color 前景 色（文字色） 

値 

初期値 
適用対象 
継承される？ 


<色> /* 表 5-4*/ 
実装依存 
全要素 
ves 


色の指定方法 


記述 

恿味 

#RGB 

16 進 1 桁ずつ… #820 は #882200 に相当 

#RRGGBB 

16 進 2 桁ずつ 

rgb(0-255. 0-255, 0-255) 

0-255 で 

rgb(100%. 100%.100%) 

0-1 00% で 

white など 

定義済みの名前（表 5-5) 


色指定に問して 

数値と色の詳細な関係は，ソフトウェアなどで確認するべきでしよう.たとえば， Windows 95 のシステ 
ムカラー•パレツトでも確認できます.なお. #RGB 形式による指定結果一覧を本霤の WWW サボートべ 
ージにて公開します. 

http :// www . gihyo . co . jp / css / 

ただし，すべての WWW 利用者がフルカラー表示のモニタを利用しているとは限りません.画像で利用 
している色も含んで256色以上を指定する埸合は，とくにカラーバランスにご注意ください. 






色と背景効果系 


定義済みカラ 


定義済みの名前 



black 


white 


maroon 


areen 



#ff0000 

#00ff00 

#0000ff 

#000000 

#808080 

#c0c0c0 


#800000 

#008000 

#000080 

#800080 

#808000 

#008080 

#ffff00 

#ff00ff 

#00ffff 


#00f 

#000 

#888 

#ccc 


#800 

#080 

#008 

#808 

#880 

#088 



R が最大. G と B は 0. したがって赤. 
ライム…明るい綠 


灰色=(黒十白）+2 
薄い灰色 


通常の綠 
紺 

紫=(赤十罱 ） +2 
オリーブ 

罱綍 

黄 

»い紫 


CSS 1 仕様 S は.この[色の名前 J は 「Windows VGA palette で定義されている J 
ていますが， CSS 2 では fHTML 4.0 仕様 fi で定義されている J と変更されました. 


backqround-color 


値 

初期値 
適用対象 
継承される？ 


< 色 > 丨 transparent 
transparent 
全要素 


章で説明したとおり，通常は 「tn 


(透明)」で，親要素の背景がそのまま使われます. 


bacKqround 


値 

初期値 
適用対象 
継承される？ 


< url > I none 


全要素 


IL は lurl (」 と1)」で囲って不します.絶対 URL でも相対 URL でも構いません.相対 URL 
HTML 文書からではなく “スタイルシートファイルからの”相対 URL として記述します. 
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一般形式： 

url ( ここに URL を害く） 


background-image : url(http ： //www.foo.com/bar/img/dog.gif); 
background-image ： url(cat.gif); 


スタイルシートを使おう！ 

スタイルシートを用いない塌合,文字色/背景色/背聚画傳は BODY 要素の属性で指定します （ HTML 3.2, 
4.0- Transitional ). しかし，この方法では本文全体への一括指定しかできません. 

ところが，スタイルシートを用いれば.任意の要素に対して文字色•背*色•背景画像を指定できます. 
すなわち， H 1 要素だけの背景画像. H 2 要素だけの背景画像などを別々に指定できるのです.このことは 
大変単純なことがらですが，丨見栄え指定の進歩 j といろ意味では驚異的だと思いませんか？ 

HTML だけで無理にスタイルを指定しようとしている人は，いつまでたつてもこの利点を享受できません. 
このことを友人みんなにふれてまわつてください. 

「スタイルシートを使おう！だって，こんなにすごいんだぜ」 


♦ 


♦ 


※ background-repeat 背景画像の繰り返し制御 


値 

repeat 1 repeat-x 1 repeat-y 1 no-repeat 

/* 水平垂直 | 水平のみ|垂直のみ|繰り返さない" 


初期値 

repeat 


適用対象 

全要素 


継承される？ 

_ 

no 


P -^ 

^ A 

「※ background-position 背景表示位置 

値 

[[< パーセント> 1 く 一般サイズ >] [く パーセント> 1 く 一般サイズ〉]?] 1 
[[top 1 center 1 bottom ] II [left Icenter 1 right ]] 

/* 垂直位 S 水平位 BV 

/* 水平垂直を同じにする塌合は，一方だけ指定すればよい*/ 


初期値 

0% 0% /*top left */ 


適用対象 
継承される？ 

ブロック系要素と置換要素 

no 


パーセントの意味 

要素自体の表示サイズ （ width や height ) に対する割合 

― ^ 


背景画像の表示開始位間を設定します•もし repeat-y かつ background-position が right であれ 
ば，その要素の右端に表示され，垂直方向に繰り返されます（図 5-5). 
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#5.4.2. —括指定 




f background 

値 

< background - color > II < background - image > II < background - repeat > II 


< background - attachment〉 II < background - position > 

初期値 

個々のブロパテイの初期値 

適用対象 

全要素 

継承される？ 

no 

&パーセントの意味 

個々のプロパティのとおり ， 


#5.4.3. システムカラーといろ概念 


勢 


CSS 2 では，<色>の値として「システムカラー」を導入されました. 

近代的な GUI を備えたシステムでは，メニューやボタンやウインドウ枠の色などを，個々 
のアプリケーションが管理するのではなく，システムが一括管理するようにしています.こ 
の 「0 S が管理する色」を「システムカラー」といいます.ユーザは「システムカラー」の設 
定を変史するだけで，すべてのアプリケーションの表示色を変更できるわけです.システム 
カラーの概念は， Windows や Mac , はては Java VM (仮想マシン）にも存在します（たとえば, 
Windows 95 では 「コントロール」 の「幽 •面」 の「デザイン」の各項目を変更してみてください）. 

スタイルシートからシステムカラーを指定できれば，「読者が普段似れ親しんでいる色」を 
指定できることになります.その一方で，シート記述時には表示色が想像できないわけです 
から，扱いは難しいかもしれません. 


BODY{ 

color ： WmdowText ; 
background : Window ； 

) 


CSS 2 は， 表 5-6 のキーワードを「システムカラー」用に用意しました.大文字小文字は区 
別されませんが，原文と同じように記述するほうが分かりやすいでしょう. 
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CSS 2 におけるシステムカラー 


名前 

対応する部分 ! 

ActiveBorder 

アクティブなウィンドウ枠の色 

ActiveCaption 

アクティブなウィンドウ（のタイトルバー）の色 

AppWorkspace 

MS - WORD のような[子ウィンドウ J を持つウィンドウ （ MDI ) の背景色 

Background 

デスクトップの背景色 

ButtonFace 

立体的なボタンなどの地の色 

ButtonHighlight 

選択（反転.ハイライト表示）された立体的なボタンなどの色 

ButtonShadow 

ButtonText 

CaptionText 

立体的なボタンなどの影の色 

ボタンの文字色 

ラペルやタイトルバーなどの文字色 

GrayText 

「使用不可（グレイアウト） j になつている文字色 

Highlight 

選択リストなどの選択されている部分の色 

HighlightText 

選択リストなどの選択されている部分の文字色 

InactiveBorder 

アクティブでないウィンドウの枠の色 

InactiveCaption 

アクティブでないウィンドウ（のタイトルバー）の色 

InactiveCaptionText 

アクティブでないウィンドウ（のタイトルバー）の文字色 

InfoBackground 

ツールチップ（バルーンヘルプ）の背景色 

InfoText 

ツールチップ（ハリレーンヘルプ）の文字色 

Menu 

メニューの背祭色 

MenuText 

メニューの文字色 

Scrollbar 

スクロールバーのバーの色 

ThreeDDarkShadow 

立体表示要素の暗い影の色 

ThreeDShadow 

立体表示要素の影の色 

ThreeDLightShadow 

立体表示要素の明るい影の色 

ThreeDFace 

立体表示要素の地の色 

ThreeDHighlight 

選択された立体表示要素の色 

Window 

ウィンドウの背景色 

WindowFrame 

ダイアログボックスなど（筆者注： border と frame の違いが不明） 

WindowText 

ウインドウの文字の色 
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テキスト属性系 





► 単体 指定 

word-spacing . 単語間隔 

letter-spacing . 文字間隔 

text-decoration . 下線など 

vertical-align . 垂直位置（上付き下付き） 

text-align . 水平位置そろえ（右そろえ，左そろえ) 

text-transform . 大文字小文字 

text-indent . 行頭インデント 


► 一括指定 

なし 


► CSS 2 追加分 

text-shadow . 影文字 


BODY{ text-align: left;} 

P{ text-indent : lem;} 

STRONG{ 

word-spacing:1.5em; 

text-decoration : underline overline; 
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5.5 テキスト属性系 


©5.5.1. 单体指定 


※ word-spacing, letter-spacing 単語間隔，文字間隔 


値 

初期偃 
適用対象 
継承される？ 
マイナス値 


normal I <一般サイズ〉 
/*nomal = 0*/ 
normal 

全要素 

yes 

可 


word - spacing は「単語問娲」， letter - spacsing は「文字問_」です.単語問陥はラテンアルファ 
ット圈の概念で，単語を区切る空白などの幅になります. 

指定値は「標樂に対する追加の幅 j であり，マイナス値を指定すれば文字は：®なり合います. 
これらのブロパティは，一般には文字の読みやすさの調整に使いますが，語句を目立たせ 
ために槲端な指定をしてもかまいません （ STRONG 要素など）（図 5-9). 


響^^^^^^^^ 
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「無し」と指定するか，各種の指定を組み合わせた指定 （「 text - decoration : underline blink 」 な 
ど）が可能です.指定は継承されませんが，「透明」処理されるために一見継承されたように 
見えます.「継承されない」の意味は，「下線に更に下線が付くことはない」という意味だと 
考えても良いでしよう. 



親要素に対する垂直位蹬関係を指定します.しかし，インライン系要素にしか適用されな 
ぃため，一•般には「直前の語句（単語)」に対する垂直位置閲係になるでしょう.単純に言え 
ば「上付き下付き」ですが，かなり複雑な指定が可能です（図 5-10). 

いわゆる乗数 x 2 のような効果を得たい塌合は. super 指定に加えてフォントサイズを小さ 
くする必要があります. 


図 5-7. 垂直位醒そろえ 
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5.5 テキスト属性系一之 



図 5-11. text-align 

厂 11 eft 

u 

水平位趵そろえは，ブロック系要素にしか指定できません. 

X CSS 仕様 B は見栄え効果を指定しますが.その効果を得るための方法は指定しません. 
www ブラウザは，ピクセル单位で文字位臛を整形しても.単に余分な空白文字を挿入す 
ることで表示をおおまかに調整するだけでも.その他の方法を採用しても自由です. 



@ipi> 


CSS 2 では， TABLE 用の text - align として.属性値に任意の文字列を指示できるように 
なりました.具体的には， rtext - align : ,, . H J として小数点そろえを実現するために活用さ 
れます. 



ソース中の大文字小文字記述を，表示時に変更するための指定です. 


# x CSS 1 仕様 S には.日本語文字のよろに大文字小文字の区別の無い文字の場合.どの指定 
^ も none として解釈されると記されています. 
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ext - indent は，ブロックの始めの一行にのみ適用される 
卜も可能です(図 5-12). 







# 


※ text-shadow 影文字 


値 


初期値 
適用対象 
適用対象 
継承される？ 


マイナス値 


none I [<color> II < length > <lengtn> <length>? ,j* 
[<color> II <length> <length> <length>?] 

パ色水平オフセット値垂直オフセツト値ぼかし範囲 V 
none 
全要素 

ブロック系要素 
no 

(処理的には transparent と受け取るべきか？） 

可（横は右，縦は下が「正』） 


勢’ 


この「影文字」とは，同じ文字をすこしずらして表示する効果のことです（図 5-13). 任意 
の数の「ずらした文字」を表示できます.「水平•垂直のオフセット値」とは，元の文字に対 
する影になる文字の移動最です.オプション指定として，影文字に「ぼかし効果」を与える 
指標「ばかし範囲」を指定できます.「ぼかし範囲」を 「3 pt 」 とした場合，元々の文字の回り 
に3ポイント程度の「ぼかし」が表示されます. 












5.5 テキスト属性系一 < 


図 5-13. 影文字の例 


練嫌麥俯祕 

影が〜、 


CSS 2 の仕様赉には，オフセツト値を0にしてぼかし範囲を大きく取ることで面白い効果を 
得る例が紹介されています（図 5-13). しかし，一方で「このプロパティは，： first-letter 疑似 
要素など特殊な部分でのみ使用してほしい」と明記されています. 


図 5-14. 凝った影文字 


background ： white ; 
color : white ； 

text - shadow ： black 0 px 0 px 5 px ； 
> ( CSS 2 仕様害 16.3.2 より転載) 


仕様と現実の違い 

この text-shadow ブロパティの「ほかし』効果は，もし実現すれば強力ですが，これまでの WWW ブラ 
ウザの機能拡張の方向を見る限り，しばらくの間サボートされないのでは無いかと思われます（私見です). 

ほかのブロパティに関しても同様ですが. W 3 C の仕様 S に8かれていることが常にサボートされるとは 
限りません.事実として，既に CSS1 仕様公開から1年以上が経ちますが，いまだに CSS1 を「完全に』 
サボートした WWW ブラウザは存在しません. Microsoft 社も Netscape Communications 社も「当社は 
CSS をサボートする J と宣言しているにもかかわらず.これが現実です.仕様と現実は別のものであるこ 
とには，十分注意してください. 
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1匿 6 

ボックス系 

1防^^ 



► 単体指定 

margin-top, margin-right, margin-bottom, margin-left 
padding-top, padding-right, padding-bottom, padding-left 
border-top-width, border-right-width, border-bottom-width, border-left-width 

► 一括指定 

margin . マーシン 

padding . パデイング 

border-width . ボーダー 幅 

border-color. ボーダーの色 

border-style. ボーダーの形 

border, border-top, border-right, border-bottom, border-left 


► CSS2 追加分 

border-top-style, border-right-style, border-bottom-style, border-left-style 
border-top-color, border-right-color, border-bottom-color, border-left-color 


BLOCKQUOTE{ 

margin：lem 3em ； /* _LT, 左右 */ 
border-width : thin 0em ； 
border-style: dashed none; 

> 

Hl{ 

border-bottom ： thin solid #800 ； 


©5.6.1. マージン ■ バデイングとは 

マージン.パデイングなどの用語を簡単に説明します（図 5-15). 
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(直前のブロ 





Wf 


上マージンをマイナスにすると，直前のプロックと文字か重なり合います.テキストイン 
デントをマイナスにすれば，行頭がパデイングよりも左に突出します.ボーダーライン 
(枠線）を指定しない塌合でも，マージンとパデイングは別のプロパテイです.表示され 
ていないだけでラインそのものは存在すると解釈してください. 


mm 



※ marain マーシン 


値 


初期値 
適用対象 
継承される？ 

パーセントの意味 


[< 一般サイズ> I くパーセント> I auto ] {1.4} 

/•auto (自動処理）… 

左右マージン：要素の width と左右 padding をひいた残り 
上下マージン：不明*/ 

0 

全要素 
no 

r 子要素は，自分のマージンを親要素のマージンに追加する*/ 
もっとも近いブロック表示の親要素の width に対する割合 
/* 上下マージンでも width に対するパーセント*/ 

可 


マイナス値 
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^ 厳密には， auto は padding などのブロパティの状態により，複雑な計算過程を経て決定 
>されます.しかし.その詳細な解説は仕様霪に讓ることにし，本書では簡潔に紹介するに 
とどめます. 


要素に対する余白で，その要素のボーダーライン（枠線）の外側に設定されます.マイナ 
ス値も指定可能です. 




Lie and Bos (1) は. auto は左右マージンにのみ指定する.と記しています.文法的には 
上下マージンにも auto が指定できますが. CSS 1 および2の仕様書のどこにも上下マー 


ジンの auto 指定結果について言及はありませんでした. 


margin や padding はインライン系要素にも適用できますが，その埸合にどう処理される 
かは仕様 a には s かれていません. 


指定の11，41は，【 J の中身を1つ，2つ，3つ，4つ#いた場合それぞれの意味が異なること 
を表わしています.これは， padding , border - width などでも同様です. 


1回数 

意味 

1回 

上下左右を同時に指定 

2回 

上下.左右の順で指定 

3回 

上.左右，下の順で指定 

4回 

上.右，下.左の順で指定 


margin : lem ； /* 上下左右ともに lem */ 
margin : lem 0 em ； /* 上下は lem , 左右は 0 em */ 
margin : lem auto 2 em ； /* 上は lem ， 左右は auto , 下は 2 em */ 
margin : lem lem 0 em 30%; /* 上，右，下，左*/ 

マージン指定は継承されませんが，子要素のマージンは親要素のマージンに自分のマージ 
ンを追加したものになります.すなわち，子要素にマージンを指定しなければ，親要素と同 
じマージンになります. 
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マージン指定のとらえかた 


UL{ margin ： 0em 0em 0em 2em; / • 左 2em*/} 

となっていれば. UL が BODY 中に現われようが， BLOCKQUOTE 中に現われようが， BODY 中の UL 中の 
UL として現われようが，常に直接の親要素のマージンに 2 em を追加して表示されます. 

<BODY> 

<P> ここが BODY のマージンだとする . </P> 

<UL> 

<LI> 「 BODY 」 に対して 2em 
<UL> 

<LI>「BODY ULj に対して 2em 
</UL> 

<LI> 「 BODY 」 に対して 2em 
</UL> 

</BODY> 

すなわち，マージンははじめから相対的な位*関係を指定すると考えてください.そのため，指定は継承 
されないのです. 


^jjaddinq バデインク 

値 

初期値 
適用対象 
継承される？ 

パーセントの意味 
マイナス値 


[< 一般サイズ> I くパーセント >]〇 .4} 

0 

全要素 
no 

もっとも近いブロック表示の親要素の width に対する割合 
不可 


费素に対する余白で，その要素のボーダーライン（枠線）の内側に設定されます•マ 
ス値は許されません. 


border-width 

ボーダー 幅 

値 

[thin 1 medium 1 thick 1 < 一般サイズ〉] {1,4} 

"細い，普通，太い…具体的なサイズは WWW ブラウザに一任 V 

初期値 

medium 

適用対象 

全要素 

継承される？ 

no 

マイナス値 

―^_ i 
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上下左右のボーダー幅を変えることで，多彩な表現が可能です（図 5-16). S 
'系要素にもボーダーを指定できます（図 5-17). 








{border ： 

{border ： 

{border: 


指定のパリエー 





I J •く 



>/* 上，右，>，左*/ 
’ ， 左右 */ 



(Lie and Bos(l>pl28 を参考にしました ) 



ボーダーの色を指定します. 

CSS 2 では， 「 transparent 』 （透明）キーワードが値として追加されました 























ボーダーの 形^^は，平面的なものから立体的なものまで複数が用意されています（図 5-18). 
これらも上下左右別々に指定できます （ CSS 1 仕様啬では11，41とはされていませんが，単なる 
ミスでしょう.実際， CSS 1 仕様浒内の記述例でも11,41として扱われています）. 


図 5-18. border-style 



なお，ボーダースタイルの初期値は 「 none 」 のため，スタイルを明示しなければボーダーは 
表示されません. 




CSS 2 では， TABLE 用に 「 hidden ] というキーワードが追加されました.枠付きのセル 
に隣接した塌合， rnoneJ のセルは隣接セルの枠を表示させますが， rhiddenj のセルは 
隣接セルの枠を表示させません （7 章を参照）. 
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^ border , border-top 

値 

初期値 
適用対象 
継承される？ 


media 


border - right , border - bottom , border-left 

<border-width> II <border-style> II <border-color> 
個々のプロパティの初期値 
全要素 


ボーダーの幅，スタイル，色を一括指定するためのブロパテイです. border ブロパテイは上 
下左右を一括に，その他は名前が示す部位を担当します. 


#5.6.3. 単体指定 


それぞれ，名前が示す通りの部位を担当します. 


値 


初期値 

0 

適用対象 

全要紊 

継承される？ 

no 

パーセントの意味 

もっとも近いブロック表示の親要素の width に対する割合 

&マイナス値 



[ JK padding - top , padding - right , padding - bottom , padding-left 

値 

く一般サイズ> 丨くパーセント〉 

初期値 

0 

適用対象 

全要素 

継承される？ 

no 

パーセントの恚味 

もっとも近いブロック表示の親要素の width に対する割合 

&マイナス値 

— 



9 - 

X border - top - width , 

oorder - right - width , border - bottom - width , border - left-width 

値 

thin 1 medium 1 thick 1 < 一般サイズ〉 

初期値 

medium 

適用対象 

全要素 

継承される？ 

no 

マイナス値 

— 

不可 

— 








CSS 2 追加分 


border-top-color, border-right-color, border-bottom-color, border-left-color 


fil < 色 > I transparent 

初期値 要素の前景色 （ color ブロパティ）の値 

適用対象 全要素 

継承される？ no 
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► 単体指定 

width , height . 表示の横幅，縦幅 

float . フロー トと回り込み 

clear . 回り込みの解除 


► 一括指定 

なし 


► CSS 2 追加分 

min - width , min-height . 横幅•縦幅の最小 

max - width , max-height . 横幅.縦幅の最大 

これら以外に関しては7章で解説します. 


HI IMG{ 

width :1 .5em ； 

} 

HI,H2, H3, H4, H5, H6{ 
clear ： both; 

} 
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5.7 表示位 B 調整 


@5.7.1 .单体指定 


% 


※ width, height 表示の横幅，縦幅 


値 


初期値 
適用対象 


<一般サイズ > 丨くパーセント> I auto 
/*auto (自動処理）… 

ブロック系要素の塌合： width は左右のマージン 
height は表示に必要な幅 
置換要素の埸合：表示に必要な幅V 
auto 

ブロック系要素と臛換要素 


パデイングをひいた残り, 


# 


継承される？ 

パーセントの意味 
，マイナス値 


もっとも近いブロック表示の親要素の width/height に対する割合 
不可 




x auto の処理は.本当はもっと複雜なものですが，その詳細な解説は仕様薄に謀ることに 
し，本靨では簡潔に紹介するにとどめます. 


表示の横幅•縦幅を指定するブロパティですが，ブロック系要素の場合，特別な効果を狙 
わない限りは auto とします. 




CSS1 仕様 B は.ブロック要素の width • height を明示したにもかかわらずその中に文 
字が表示しきれない埸合は.部分的にスクロールバーのようなものを提供してもよいが, 
height の指定を無視してもよいとしています. CSS2 仕様薄では，はみ出した塌合の処理 
方法を指定するためのブロパティが新たに用意されています （7 S を参照）. 


K 換要素（画像など）では，指定したサイズに画像が拡大•縮小されます. width か height 
の一方だけを明示し他方を auto とすれば，比率を保ったまま処理されます（図 5-19). 


図 5-19. 比率を守った引き延ばし 



なお，パーセント指定は「最も近いブロック表示の親要素 （the generated box's containing block) 
…コンテナブロック」 （7 章を参照）のサイズに対する割合です.自分自身の本来のサイズに対 
する割合では無いので，ご注意ください （CSS1 の height プロパティには，パーセント指定は許 
されていません. CSS2 では変更されました）. 
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media 


广※ float フロー トと回り込み 

値 

left 1 right 1 none 

初期値 

none 

適用対象 

全要素 

^継承される？ 

^_ i 


フロートが left (right) に指定された要素は， display ブロパテイの値にかかわらずブロック 
表示に変更され，その親要素の width の左端（右端）に移動すると同時に，その“反対側への” 
後続テキストの回り込みを許可します.したがって， rnoatileftj とすると，右側への回り込み 
が許可されます. 




float ブロパテイは表示の位置決めのためのブロパテイではないので，属性値に rcenterj 
はありません.文字の回り込みを伴わない単なる表示位 H の調整を行いたい塌合は， 
margin • width • text-align ブロパテイをご利用ください. 


CSS では，幽•像だけでなく文字もフロート化できます.テキストで作った図表や引用ブロ 
クをフロート化させても曲•白いでしよう（図 5-20). 




:lear ブロパテイが left (right) に指疋されていると，その要素が現われた所で， float:le 
ght) によって生まれた回り込みが解除されます. 

:lear プロパティを用いれば，「新しい見出しが始まった 



ら，回り込みは解除する」 

















- 5.7 表示位置調整 


定が可能です（図 5-21). 




回り込み解除指定は， HTML3.2 や 4.0-Transitional の BR 要素の CLEAR 属性でも行え 
ます.しかし， BR 要素を埋め込むよりも，見出し要素などに clear ブロパテイを設定する 
ほうが論理的です.なお， HTML の BR 要素のスタイルシートの CLEAR 属性は， both で 
はなくて ALL というキーワードを採用していました.混乱の無いよう気を付けてください. 





CSS 2 追加分 


※ min-width, min-h eiqht 横幅 . 縱幅の最小 P _ 

値 く一般サイズ> 丨くパーセント〉 

初期値 0 

適用対象 ブロック系要素と■換要素 

継承される？ no 

ノ《ーセントの*味もっとも近いブロック表示の親要素の width/height に対する割合 
マイナス値 不可 


※ max-width, 

値 

初期値 
適用対象 
継承される？ 

パーセントの意味 
マイナス値 


^height 縦幅•縦幅の最大値 

< —般サイズ> I くパーセント> I none 
none 

ブロック系要素と置換要素 
no 

もっとも近いブロツク表示の親要素の width/height に対する割合 
不可 


ロパテイが指足されていると， width や height の指定値（あるいは auto による計 
の範囲の外である場合，こちらの値が採用されます. 
















media in detail 



その他の表示調整系 






















5.8 その他の表示調整系 


#5.8.1. 単体指定 


<a 

皆 福 



P ※ display 表示形式 1 

値 inline 1 block 1 list-item 1 run-in 1 compact 1 marker 1 

table 1 inline-table 1 table-row-group 1 
table-header-group 1 table-footer-group 1 table-row 1 
table-column-group 1 table-column 1 table-cell 1 table-caption 1 

none 

初期値 inline (注： CSS1 では block) 

/*WWW ブラウザ標準スタイルシートによって 

HTML 文 S のブロック系要素は block. 

インライン系要素は inline とされていると思われるV 
適用対象 全要素 

継承される？ no 

^_ — 狐 ^ 

W 


F - — 


display ブロパティは，各要素の表示のされかたを指定します（表 5-7). また， display ブロ 
パティの指定を元に，各楝ブロパティが適川されるか否かが判断されます （5.1 節を参照〉（変 
わるのは衣示I•.の解釈だけで，マークアップにおける性質は変わりません）. 


表 5-7. display ブロパティの意味 




block 

ブロック（その要素の開始•終了で改行する） 

inline 

インライン（その要素の開始•終了では改行しない） 

list-item 

要素の行頭に「マーカー』が付けられる特別な block 

run-in 

後述する特殊な block 

compact 

後述する特殊な list-item 

marker 

後述する特殊な区分で. block でも inline でも無い 

table 系 

テーブルに相当する特殊な区分 （7 章を参照） 

none 

表示しない 


(CSS1 では， block, inline, list-item, none のみ） 


通常は， HTML の本来の位置づけとは異なる効果を得たい場合にのみ指定します.たとえば， 
UL 要素のリスト項目を横に並べたい場合は，その内部の LI 要素を inline として指定します 
(図 5-22). 
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図 5-22. インライン指定の LI 要素 

<STYLE TYPE= B text/css■> 

UL LI{ display: inline} 
</STYLE> 

<UL> 

<LI>lst, 

<LI>2nd. 

</UL> 


1 st , 2 nd . 


「 display : compact 」 と指定された要素は，その®:後のブロックを自分の横にならベても表示 
幅からはみ出さない場合に，ブロックを横にならベるように機能します（図 5-23. compact 指 
定).すなわち，表示幅からはみ出さない場合は，自分と直後のブロックをつなげてひとつの 
block であるかのように振る舞うことになります. 


図 5-23. compact の適用例 

UL.NAME{display: compact} 

<U1j BliATijEb MiSNt 

<LI>John 

JEK-> 

<LI>Paul 


<LI>Ringo 


<LI>George 


</UL> 



< 

1 - 

- 1 表示幅 

• John • Paul 

• George 

• Ringo 


「 display : run - in 」 は，おもに見出しに使われる区分で，常にその直後のブロックと自分自身 
をひとつのブロックであるかのように振る舞わせます. 

compact でも _- in でも同じですが，要素の表示がつながってしまうため，： after 疑似要素と 
content ブロパテイを有効に利用するべきでしょう（図5-24, 7章を参照). 
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3 その他の表示調整系 


H3{display ： run-i 
H3 ： after{content ： 


<H1> 日記く/ Hl> 

<H2>1998 年 5 月 21 日 </H2> 


…」 ：; T^Z；' 二”: て : 

' t ：. ；■ ° ■ ' :f:v へ . , :'' 1 ■ _ 


,. 湿気が無いからまだいいけど，かなり暑い. 
え害き </H3> 

つに 3 回も電話したのに，一度もつながらなか 


1998年5 


湿気が無いからまだいいけど，かなり暑い- 
いつに 3 回も電話したのに， 一度もつながら 


^ipi> 


お.仕様 S によると.直後のブロックが float 指定あるいは絶対位 H 指定 （7 章を参照) 
れている場合は， compact や mn-in は機能しません. 


※ wnite-sy 

値 


初期値 


適用対象 
継承される？ 


空白の取 り扱い _ 

normal I pre I nowrap 

/* 標準丨ブレ整形I自動折り返しを拒否*/ 

normal 

/*WWW ブラウザ標準のスタイルシートによって 
PRE 要素は pre 指定されていると思われる . V 
ブロック系要素 


ース中の空白 • タブ•改行をどのように表示するかを指定します（表 5-8) 


プロパティの意味 


指定 


連続した空白 • タブ • 改行 表示幅に合わせた自動折り返し 


一つの空白として表示 


ソースのまま表示 


一つの空白として表示 


ハ（ソース中の“改行"で改行） 
ハ （BR 要素でのみ改行） 
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detail 


※ list-style-type リス ト マークの種類 

値 

disc 1 circle 1 square I decimal 1 lower-roman 1 upper-roman 1 lower-alpha 1 
upper-alpha 1 none 

/*#| 〇丨 _| 1.2.3 - | Ui.iii …丨 1,11, 川 … | 
a,b,c … | A.B.C … I 無し */ 

/* これは CSS1 の仕様である*/ 

初期値 

disc 

適用対象 

list-item 要素 

&継承される？ 

yes , 


■ ■ - —- 切 

ド ザ ザ • ^ 鐘 ^ % ■ 1 ^ fe W * . 1 * 


の場合は，そちらが優先されます. 


) CSS2 では • list' 

style-type の属性値が大幅に追加されました（表 5-9). 

CSS2 の list-type-style 


| 値 

説明 | 

decimal-leading-zero 

頭にゼロを付けた数字 (01. 02•…) 

lower - latin . upper-latin 

alpha と同じ （a. b. c …） 

lower-greek 

ギリシャ 文字 （a• 0.…) ( alpha , beta •…) 

hebrew 

伝統的なへブライ式 

georgian 

ジ3— ジア式 ( an, ban. gan •••, he, tan. in, in-an …） 

armenian 

伝統的なアルメニア式 

cjk-ideographic 

象形文字 

hiragana 

あ.！/、.つ… （a. i, u“.） 

katakana 

ァ•イ.ゥ… （ A . I . U …） 

hiragana-iroha 

い•ろ，は… （1, ro. ha …) 

katakana-iroha 

イ .口. ハ… （I. RO. HA-) 


goergian の例は， CSS2 仕様#に書かれていたものです.筆者の不明で， 
ベられませんでした.イギリスのジョージア王朝のことでしょうか？ 


の詳細は調 











入れ子リストにおけるマーカー指定での注意 


指定は継承されるため，リストの入れ子レベルごとにマーカーを変更したい塌合は，すべての入れ子レべ 
ルについて明示的に指定する必要があります（図 5-25). 

図 5-25. 入れ子指定を怠ると 
UL{list-style-type: disc} 

UL UL{list-sty 丄 e-type: circle) 

•入れ子 1 

〇入れ子 2 
〇入れ子 2 

〇入れ子3 (入れ子2の指定を継承） 

〇入れ子3 

•入れ子1 

WWW ブラウザ標準スタイルシートの記述に期待するという手もあるのですが， IE4.0 も Netscape 
Navigator4.0 も，「子孫（下降）セレクタ』を優先するようです.なお. CSS2 であれば， r 子セレクタ J 
を上手く利用することでこの不具合を避けられます. 


数え上げリストの数値指定 

HTML3.2 および HTML4.0Transitional では.〇 L 要素の START 厲性で数え上げリストの数字をコントロ 
ールできました.しかし. HTML4.0Strict ではこの属性は削除されました.さて.その代わりに用窻された 
CSS のブロパテイは何でしよう？ 

実は. CSS1 では相当するブロノ t テイは用意されませんでした.しかし， CSS2 ではカウンタといラ仕組 
みが導入され.「カウントを開始する数字 j 『一度にカウントアップする屋 J などを自在に指定できます.そ 
のかわり，数字を制御するには.複数のブロパテイを組み合わさなければいけません. 

詳しくは7章を参照してください. 


※ list - style - imaqe リストマークの画像指定 


値 

初期値 
適用対象 
継承される？ 


<url> I none 
none 

list-item 要素 
yes 


1 スト行頭のマークを任意の画像で指定します（図 5-26). 画像を表示できない場合は， 
style-type ブロパテイの指定が有効になります. 
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CSS properties for visual media in detail 


マークを画像に 




値 

初期値 
適用対象 
継承される？ 


sition リストマークの内側表示_外側表示 


inside I outside 
outside 
list-item 要素 


マークが要素ブロックの内部に表示されるのか外部に表示されるのかを指定します.この 
いは文章が析り返し表示されたときに明確になります（図 5-27). 


5-27. list - style-position ブロパテイの意味 
inside : 



outside : 



.8.2. —括指定 


















5.8 その他の表示調整系一 < 


©5.8.3. CSS2 追加分 

マーカーとは 

リストの行頭マーカーの振る舞いは「フロート指定したもの」に似ていますが，必ずしも 
同一ではありません.そこで， CSS 2 では新たに「マーカー」という概念を定義しました. 

CSS 2 では，「マーカー」の実体を， 「 display : marker 」 と指定された特殊な 「: before 」 疑似要 
素として処理します. list - style 系のブロパティを指定するのは 「 list - item 」 系要素ですが，実際 
に調整されるのはリスト項目行頭の「マーカー」（疑似）要素なのです. 

マーカーは元の要素とは独立した要素だと考えますので，たとえば， LI 要素に背景画像を 
指定しても，マーカーには適用されません.マーカーのサイズや色，背景などの調整は，端 
的には LLbefore 疑似要素に指定することになります. 


(§ip^> 


なお，任意の要素の r：beforJ (あるいは: after ) 疑似要素に 『 display : markerj を指定 
することによつて.その要素の前後にマーカーを表示させられます.しかし.リスト以外 
では利用すべきではないでしよろ. 



※ marker-offset 

fi - 

初期値 
適用対象 
継承される？ 


マイナス値 

辱- 


マーカ ーの 位贗調整 

<一般サイズ > 丨 auto 
auto 

マーカー 

no 

可/*正であれば.マーカーがより離れる•負であれば.近づく*/ 


者 



マーカーには padding と border は指定できますが， margin は指定できないことになりました. 
そのかわりに， marker - offset ブロパテイを利用します. 


marker - offset は，マーカーと元要素との間隔を調整するためのブロパテイです.マーカーの 


性質上，水平方向の調整のみが可能です. 


【引用文献】 

(1) H さ kon Wium Lie and Bert Bos (1997) Cascading Style Sheets : addison wesley , 279 pp 

W 3 C の CSS 仕様凋整担当者である Hikon Wium Lie と Bert Bos が紀述した CSS 丨の仕様解説書です.ただし， HTML 4.0 
兑案検討中の段防で出版されたために， HTML 文宵との連携の仕様が最終的に採用されたものと異なります. 
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ering 


6 章では，実際にスタイルシートを構築する上で重要になる 
概念や，無理のないシートにするための「考え方』を紹介しま 
す. 



Chapter 6 road to mastering CSS 



逆説的な導入 


#6.1.1. CSS 1 のみによる影付き文字 

CSS 2 では「影付き文字」のための専用ブロパティが用意されましたが ， Internet Explorer 4.0 
も Netscape Navigator 4.0 もまだこれをサポートしていません.しかし， CSS 1 の機能のみでも， 
マイナスの上マージンとテキストインデントを利用すれば，「影付き文字」効果を簡単に作れ 
るのです（図 6-1). 


図 6-1 . 影付き文字 

縛緣每懦杳 

少しずらして文字を描写すれば，影がつい 
たような感じになります。_ J 

「おう，これは簡単で，しかもカツコイイ！これでこそスタイルシートだ I」. 
しかし，本当にそうでしようか . 


図 6-1 のソースコード 


<!DOCTY 

<HTML> 


PE HTML PUBLIC ■-//W3C//DTD HTML 4.0//EN B > 


<HEAD> 

<TITLE>text with shadow く / TITLE> 

く STYLE TYPE="text/CSS"> 

BODY{background : white；} 

Hl{ 

font : 700 2em sans-serif ； 
line-height:1; 

} 

HI SPAN{ 

margin ： 0em ； 
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6.1 逆説的な導入一 < 


display: block; 

} 

HI SPAN.BEHIND{ 
color: gray; 

} 

HI SPAN.FORWARD{ 
color ： black ； 

margin - top :-1-2 em ; /* ここがボイントです*/ 

text - indent : -0.2 em ; /* ここがポイントです*/ 

} 

</STYLE> 

</HEAD> 

<BODY> 

<H1> 

く SPAN CLASS=-BEHIND -> 文字に彩を付ける </SPAN> 

<SPAN CLASS=-FORWARD-> 文字に彩を付ける </SPAN> 

</Hl> 

<P> 少しずらして文字を描写すれば，彩がついたような感じになります . </P> 
</BODY> 

</HTML> 


#6.1.2. 画像にしなかった利点はあるのか 

影付き文字などの効果は，ドロー系の_像作成ソフトウェアを用いればより簡単に，しか 
も®度に作成できます.また，この結果をペイント系レタッチソフトで加工すれば，水でぬ 
らしたようににじませたり，グラデーション，エンボスなどさまざまな効果を実現できます. 
それをせずに，わざわざスタイルシートを用いた理由は何でしょう. 

「だって，はじめに"画像は望ましくない”って言ったじゃないか!」 

確かに，画像にしてしまうとデータサイズが大きくなりますし，また画像を表示できない 
人に情報を伝達できません.しかし，それでも画像でしか得られない効果が必要なときは， 
やはり画像を用いるべきです.スタイルシートは_像の代替になるものではありませんし， 
そのように利用するのは望ましくありません. 

図 6-1 の HTML 文書を，スタイルシートをオフにして表示するとどうなるでしょうか.ソー 
スを見て分かるとおり， 

「文字に影を付ける文字に影を付ける」 

となります.この文書の見出しは「文字に影を付ける文字に影を付ける」でいいのでしょう 
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》一 Chapter 6 road to mastering CSS - 

この問題は， CSS 2 のサポートを待てば解決するわけではありません.なぜなら，根本にあ 
るのは，「本来スタイルシートで行うべきでないことを強行した J という問題なのです. 


• スタイルシートが無いと内容を伝達できない HTML 文書になってしまった 


• スタイルシートのために文章内容を改ざんしてしまった 


このような事態は，1章で挙げたスタイルシートの利点に反するものです.どちらかといえ 
ば，「怪しいテクニック」の欠点に近いものです.これは望ましい使い方ではありません. 

それでは，このような場合にはどうするべきなのでしょうか？ 本来の見出しは「文字に 
影を付ける」のはずです.そうであれば， HTML 文書インスタンスには， 

<H1> 文字に影を付ける </Hl> 

とのみ沓かれているべきです.影付き文字として表示したければ，それを画像にし， 


<HlxIMG SRC=-title .gif ALT= ■文字に影を付ける _x/Hl> 


としておくのが良いでしょう.これならば，両像を表示しない人にも内容を伝達できます. 




もちろん， CSS 2 の text - shadow ブロパテイを用いているのはかまいません. 


#6.1.3 •好ましい「考え方』 

スタイルシートは HTML 文替の表示結果を調整するものです.しかし，スタイルシートが 
無ぃと読めなぃような HTML 文#を#ぃてはぃけません.では，スタイルシートはどんな形 
で HTML 文#と速携するべきなのでしょう？筆者の用意した答えはこうです. 


HTML 文醫の表現を助ける目的で.その檇成に合わせてスタイルシートを記述しましょう. 


2 • 3章では， HTML 文書で構成を明示することを解説しました.その指針にしたがってい 
る限り，作成した HTML 文書はスタイルシート無しでも十分文章内容をアピールできていま 
す.スタイルシートは本来，その文章アビールを補助的にサポートするものであるべきです. 
「見出しは見出しらしく」「本文は本文らしく」をモットーにスタイルシートを記述していき 
ましょう（補助的といっても，見栄えに関しては HTML 文書を支配するものです). 

以降では，スタイルシートを記述するための考え方を，「全体的な調整」「見出しの調整」の 
順に具体的に紹介します.最後には，使いまわしの効くスタイルシートについて紹介します. 
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6.2 全体的な調整 




全体的な調整 


©6.2.1.r 一般-例外』といろ原則を守る 

文普のスタイル表現に限らず，多くの表現には r 一般 j と『例外』が存在します.通常， 
本文中のほとんどの文は同じスタイルで#かれ，その中の特別な語句，すなわち，見出しや 
強調語句だけが特別なスタイルで書かれています. 

CSS の継承 ( inheritance ) という仕組みを利用すれば，この「一般 J と「例外」を的確に表 
現できます.すなわち， BODY 要素に対して一般的なスタイルを指定し，各要素には基本的 
にその指定を継承させます.そして，例外的に指定したい部分を後から付け足していくのが 
望ましいでしよう（この考え方は， CSS 2 の仕様#にも明示されています）. 

•子要素に共通する一般性質は，親要素に「持ち上げ」よう 

®6.2.2. BODY 要素（一般本文）への指定 

基本的に，本文は「読みやすい」ことが大事です.したがって，太さは太すぎず細すぎず， 
サイズは大きすぎず小さすぎず，フォントファミリーは奇抜でなく…と，「無難」なものを目 
指すのが普通だと思われます.一般的には，大体次のような指定になると思います. 


/* whitebase.css */ /* 原始段階*/ 

BODY{ 

ront: medium sent ； /*weight-400 : 



style-nomal : variant-nomal*/ 


text-a 丄 ign: left ； 
background : #fff; /*white*/ 
color :#000 ； /*black •/ 

line-height: 1.4? /* 一般に，読みやすいのは 1.2 〜 1.7*/ 

} 

/* 以降の指定は BODY へのものではありませんが，ここにあげておきます.*/ 

A:link{color :#63 f) 

A ： visited{color ： #f0a} 


A ： active{color ： #f00；} 
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Chapter 6 road to mastering CSS 


特別に意識すべき点は次のとおりです. 


•文字色と背景色はセットで指定する（カスケーディング処理によって「読めない色の組み合 
わせ」になるのを避けるため） 

•行幅の継承の違いを意識し， em の指定と「掛ける値 J の指定を使い分ける 




medium か， 12 pt か？ 

whitebase . css では， BODY の font - size を medium としました.これには理由があります. 

もし.これを font - size : 12 pt とした塌合，読者はこのシートによる表示サイズを自分の播境に合わせて変 
更できません.一方， medium の具体的なサイズは.読者が WWW ブラウザの設定を変えることで.読者 
自身の手で調整できるのです. 

デイスブレイの大きさによつては， 12 pt は小さすぎるかも大きすぎるかもしれません.したがつて，筆 
者は medium の指定をお勧めします. 


#6.2.3. インライン系要素への指定 

STRONG 要素や A (アンカー）要素といったインライン系要素は，本文の中に埋め込まれ 
る特別な語句に相当します.これらが普通の本文と明確に区別できるのは良いことですが, 
あまり極端にスタイルを変更しては，かえって本文が読みにくくなります（図 6-2). 惡い例 
としては，次のようなものが挙げられます. 


• STRONG { font - size :3 em }. 大きすぎるため，文の流れが悪くなる 

• STRONG { border:lem aroove }. ボーダーが太すぎる 


図 6-2. STRONG 要素への指定の悪い例 


，は2月24日ですひろのみやさんの翌 
4月28日ひろひと 

人中▲の紙 


私の 


h です。弟の设生 h は 4 


••ににんがし”と“しにがはち”です。嚙っぼいけど.本气の癱生 H です。 


これ以外にもいろいろなものが考えられますが，大事なのは r 無理の無い程度に変える j 
ように心がけることです.したがって，ボーダーラインや背景画像などの強烈なものは避け 
ることにし，文字そのものに関するちょっとした調整に止めるほうが良いと思われます.次 
に挙げるものうち，いくつかを組み合わせて指定するとよいでしょう. 
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6.2 全体的な調整一 < 


•ちょっと文字を太くする，大きくする，フォントファミリーを変える 
•ちょっと色を変える，背景色を付ける 
•斜体，太字，点滅，アンダーラインなど 
•単語間隔や文字間隔を詰める，広げる 

「 WWW ブラウザ標準のスタイルシートに期待して，まったく変更しない」のも望ましい態 
度です.そうすれば，読者がもっとも惯れ親しんだ表示を取り込むことになるのですから. 

6.6.1 で例に取り上げる 「 ks . css 」 では， STRONG に図 6-3 の指定を採用しています. 

STRONG{ 

color : black ； 
background : #faa; 
font-weight : bolder; 

} 


図 6-3. rks.cssJ の STRONG 



®6.2.4. ブロック系要素への指定 

ふつうに考えると，「本文」と「見出し」は別のものです.ところが， HTML 4.0 では BODY 
要素が「本文」であり，その中に「見出し」や「段落」などが「ブロック要素」とひとくく 
りにされています. 
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しかし「見出し」は，ほかのブロック系要素とは異なる特別な役割を持っています.すな 
わち，「見出し」とは本文の流れの変化を主張するための「道しるべ」であり，それに続く内 
容を端的に表している「短いまとめの言葉」です.したがって「見出し」は，ひと目で本文 
と区別できるように目立っているべきですし，少々派手すぎても内容把握には支障ありませ 
ん.っまり「見出し」に関しては，どんどんスタイル変更してもよいでしょう.そこで，「見 
出し」に関しては，独立して 6.4 節として詳細に取り上げたいと思います. 

ほかのブロック系要素は，「本文」を構成するものです. P 要素を「ごく一般の本文」とと 
らえるならば， BLOCKQUOTE 要素などは「特殊な本文」だといえるでしょう. 

なかでも， BLOCKQUOTE 要素は位置づけのはっきりした要素です.その内容は「ほかの畓 
物などからの引用」なのですから，しっかりと「ごく一般の本文」と流れが区別できるべき 
でしょう.表現するべきは「流れの変化」ですから，文字そのものはあまりいじらずに，ボ 
ーダーラインやマージンなど「表示の枠」を中心に調整したほうが良いと思われます（ブロ 
ック系要素で文字そのものを派手にいじってしまうと，その内部のインライン系要素の表現 
に困ることになるでしょう）.そのためには，次のような指定が考えられます. 

• マージンを增やす 
• ボーダーラインを付ける 

•ちょっと文字を小さくする，フォントファミリーを変える 
•斜体にする 

•ちょっと色を変える，背景色や背景画像を付ける 


6.6.2 で例に取り上げる 「 prince . css 」 では「マージンを均等に取り，ボーダーを左右のみに」 
指定し（図 6-4), rzappa . cssj では「左マージンを大きく取り，さらにボーダーも左だけに」 
指定しています（図 6-5). 


図 6-4. rprince.cssj の BLOCKQUOTE 

BLOCKQUOTE{ 

margin ： 2em ； 

font : italic lem monospace; 
color ： #bbb; 

border-width ： 0em thick ； 
border-style: solid; 
border-color: #a40; 
padding : lem 0.5em；; 




6.2 全体的な調整 


^Crystal Ball * 

再生すると，いきなり船の汽笛のような怪しい音の5列ガ■始まる。「おいおい，こんなので 
天才きどられても困るせ j と思いなガ<鈐分侍っていると，クリア•フィッシャー•オーケスト 
ラの爽しい演奏ガ■始まるパンーラ E のラテンパーカジシヨンが怪し V 、リズムを蛭く奏でる•そ 
うこうしているうちに，波がカーミールめ芦て現れる* 


おおつ，これはこれは.見事なブリンス»♦しかも. PARADE - SlgnVllmes 明の 



図 6-5. fzappa.cssJ の BLOCKQUOTE 



この考え方は，ほかのブロック系要素でも通用するでしょぅ. 




リストの表示に関する指定は ， Netscape Navigator や Internet Explorer などの標準の指 
定（入れ子ごとに左マージンが深くなる）があまりにも絶妙な効果を上げています.われ 
われは.マージンのサイズを変える程度の変更にとどまるべきでしよう. 
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ここで話の毛色が変わりますが，実際に「全体的な」スタイルシートの構築に入る前に， 
em ユニットに代表される相対指定の重要性に関して説明します. 

em ユニットを無視すると，とんでもない混乱に陥ることがあります.まずは， em ユニット 
を使わないとどんな難点に突き当たるのかを例示しましょう. 

@6.3.1. text-indent における混乱 

たとえば，フォントサイズ 10 pt の要素に対し，1文字分のインデントを期待するという意味 
で Htext - indem : lOptl 」 と指定したとしましょう.これでは，フォントサイズを変更するたび 
にインデントの指定も変更しなくては「一文字文のインデント」をキープできません. ntext - 
indent : lem ) J としていれば，雒なく「一文字分のインデント」を実現できるのに…！ 


BODY{ 

font-size:10pt; 
text-indent: lem ； 

} 

/♦text-indent ： 10pt でも一文字分だが，フオントサイズを 20 pt に変更したら， 

10pt は一文字分では無くなってしまう . 一方， lem は常に一文字分である .*/ 

©6.3.2. 親子間の font-size における混乱 

また， BODY の font - size が 12 pt のとき， H 1 をその2倍にしたい場合はどのように指定するべ 
きでしようか？たいていの場合 H 1 の親要素は BODY なので ， 「HI { font - size : 2 em } J で OK で 
す（注：関係を明示するために ， 「BODY Hl | font - size : 2 em }」 と文脈付きで記述しても構いま 
せん）.これを 「HI { font - size : 24 pU 」 などとしてしまうと， BODY の font - size を1 Opt に変更し 
たときに，あわせて H 1 の指定まで変更する羽目に陥ります. 
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6.3 em ユニットの活用（相対指定のススメ）一< 


©6.3.3. 問題の本質と解決の指針 

以上で紹介したのは，実は「バランスをキープする上での問題」です. 

スタイルシートは個々の要素のスタイルを別々に指定していくものですが，指定が個々で 
完結しているわけではありません.すなわち，スタイルシートは，各部分の相対的なバラン 
スを考慮しながらくみ上げていくものであり，そのバランスをキープすることが重要課題(こ 
なるのです. 

ところが，各種指定を「絶対値」で指定してしまうと，ある部分を変更したくなった場合， 
連鎖して（バランスを保っために）別の部分を変更しなければならなくなります.この際に 
どこか丨っでも速鎖変更を怠れば，思わぬところで意図した表示結果ではないものが表示され 
てしまいます.シートが複雑になればなるほど，「どこを直せばいいのかわからなくなる」こ 
とは必至です. 

この混乱を避けるには，「はじめから相対指定でシートをくみ上げていくべき」です.相対 
指定であれば，ある丨個所のサイズを変更したとしても，バランスをキープするためにシート 
全体を押き I 寅す必要はありません.なぜなら，はじめから「バランス」だけが#かれている 
のですから. 

相対指定のためのサイズ电位としてもっとも柔軟性に访んでいるのが em ユニットです （em 
ユニットは， fom - size プロパティにおいては親要素との相対関係を，その他のブロパティにお 
いてはその费ぶの font - size との相対関係を表現します）. em ユニットを用いれば，シートの中 
身が「何文字分のインデントやマージン」というわかりやすい表現になります.シートをわ 
かりやすく記述し，しかも相紂性を確保するために，存分に em ユニットを活用するべきです 

^ fF ) ブロパティによっては，パーセント指定が可能なものもあります.パーセントも em ユニ 
ツトと同じよろに有用です. 

しかし，すべてが「相対」では何も表示できません.すなわち，どこかに丨っ，基準となる 
絶対値が必要です.そのためには，基準絶対値は 「 BODY に指定する font - sizej で指定す 

るのがよいでしよう.すなわち， BODY の fom - size のみを絶対サイズで記述し，残りのものは 
すべて em ユニットやパーセント指定などの相対指定にするわけです.そうすれば， BODY の 
fom - size を変更しただけで，ほかの部分の表示もバランスを保ったまま（自動的に連鎖して） 
変更されます. 
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太さの相対指定の活用について 


font - size には ， larger - smaller といった相対指定専用のキーワードが用慝されています.しかし，一段 
階の「大きめ j 「小さめ J しか指定できず， em ユニットに比べると.表現力が貧弱です. 

同様に，太さ ( font - weight ) にも bolder • lighter といった相対指定専用のキーワードがあります.しか 
し，やはり一段階の[太め J 『細め」しか指定できず.表現力が貧弱です.といっても， em ユニットでは太 
さは指定できないため，相対指定に関してはもラ選択肢がありません.そこで，筆者は太さに関してはすべ 
て絶対指定を採用しています（先に述べた理念と矛盾していますが，暫定的手段です). 

bolder • lighter の指定は，インライン系要素への指定には有用だと思います.たとえば， STRONG 要素 
の表示が H 1 要累中に現れよラと P 要素中に現れよ5と，確実に1段階太く •細く表示させることができる 
からです. 

しかし，ブロック系要素の親子関係では. M 段階 j の変化よりも急激に変化するほうが望ましい塌合が 
多いでしよう.たとえば， H 1 要素は BODY 要素よりも4段階以上太くなって欲しいと思っても不思議はな 
いでしよう. 

このような塌合には font - size における em ユニットのようなものが欲しいのですが，現存のスタイルシー 
卜の仕様ではそのような单位が用意されていません.そこで.本黴はあえて絶対指定で太さを指定しました. 



6.4 見出しの調整 



見出しの調整 


©6.4.1. サイズと左マージン 

既に述べたとおり，見出しは本文よりも目立つているべきだと考えられます. 

• ずば抜けて太く，大きくする 
• フォントファミリーを変える 
•右寄せ，真ん中寄せを用いる 

^見出しが長く複数行にわたった塌合でも”つの見出し"だと強調するために，行幅は 
1.0 〜 1.2 程度にしておくとよいでしょう. 

さらに，見出しレベル問に違ぃを持たすことが重要です.レベルの上下が自然に読み取れ 
るよう工夫しておくとより望ましいでしょう.一般に，見出しレベルの変化は，サイズの大 
小や左マージン M の増減で示されます. 

• サイズ大 . レベルが高い 

• 左寄せ時に左マージン多 . レベルが低い 

図 6-6 に見出しを調整したスタイルシート例を提示します.ここでは，どのレベルの見出し 
にも共通する指定を先に記述しておくと，シート全体が把握しやすくなることをご確認くだ 
さい.これも「一般—例外」という考え方のひとつです. 


/* atomic.css */ 

@ import url(whitebase.css) ; 

/* 見出し全般への指定*/ 

HI,H2, H3, H4, H5, H6{ 
font-weight : 700; 
ront-famaly ： sans-serif ； 

丄 ine-height : 1.1 ； 

}/* 以上のスタイルシートは，この章を通じてベースとして利用します.*/ 
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/* standard.css */ 

@import url(atomic.css); 

Hl{ 

font-weight: 900; /* 更に太く*/ 
font-size ：3em； /* ずば抜けて大きく*/ 

text-align : right; /* 右寄せで変化を強調*/ 

margin：lem 0em 0em 30%; 

/♦ “右寄 + 左に大きなマージン”は，文字折り返し時に効果が出る*/ 

} 

H2{ 

text-align : center; /* 真ん中よせで変化を強調*/ 
font-size ：2em； /* 第1レベルよりは小さく，3，4よりは大きく*/ 

} 

H3{ font-size： 1 .6em} 

H4{ 

ront-size： 1.3em； 

margin-left: lem; /* レベル 3 と 4 の違いは，左マージンで*/ 

) 

H5{ 

font-size： 1.2em； 
margin-left: 1.3em； 

} 

H6{ 

font-size:1.lem； 
margin-left : 1.5em； 


<!DOCTYPE HTML PUBLIC --//W3C//DTD HTML 4.0//EN"> 

<HTML> 

<HEAD> 

<TITLE> ももたろうを考える </TITLE> 

<LINK REL="STYELSHEET" TYPE=-text/css■ HREF=■whitebase.css■> 
<LINK REL= - STYELSHEET- TYPE=-text/css - HREF=■atomic.css - > 
<LINK REL= B STYELSHEET B TYPE= B text/css' HREF= - standard.css'> 
</HEAD> 

<BODY> 

<H1>1 •ももたろうを考える <バ11> 

<H2>1• 1 • 出発まで </H2> 

<H3>1.1•1 •はじまりはじまり </H3> 

<H3>1.1.2. 桃太郎の誕生 </H3> 

<H2>1• 2 . 鬼が島へ </H2> 
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6.4 見出しの調整 



犬猿の仲 


@ import と LINK 要素を併記 


standard . css には @ import で atomic . css が取り込まれています. atomic . css には whitebase . css が取り 
込まれています.したがつて， LINK 要素で standard . css を指定しただけで，この3つのシートを指定した 
のと同じ効果が得られます. 

しかし，この例ではわざわざ3つのシートへの LINK 要素がかかれています.なぜでしようか？ 

実は ， Netscape Navigator 4.0 が @ import 構文をサボートしていないことへの配慮です.作業の手間は 
増えますが，過渡期にはこのようなテクニックが必要になるものです. 


スタイルシートの分割と再利用 


どのスタイルシートでも共通に使いうる土台的な部分は，独立したシートとして保存しておき，各シート 
から @ import して利用すると便利でしよう.また，コンポーネント化の発想に基づいて，見出しだけ•段 
落だけ • 引用ブロックだけのシートを複数用意し， LINK 要素でそれらを組み合わせながら新たな効果を編 
み出していくのも楽しいと思われます. 

しかし，筆者は『この埸合はシートを分離しておくべきだ J という絶対的な方針をお伝えすることはでき 
ません.なぜなら，趣味や目指す指定によって，分離ルールは大きく変化するものだからです. 

この章におけるシートの分離 • コンポーネント化はあくまでも筆者のお勧めですが，もしこれが参考にな 
れば幸いです. 


見出しレベルをサイズと左マージンで表現 


HI I ronc-size ： 3em ； 

text-align：right 
margin：lem 0em 

} 


.出発まで 


text-align : cer 
font-size ： 2em ； 


(3 じまり (3 じまり 


2桃太郎の a 生 


<H3>1.2.1. 旅の仲間 </H3> 
<H4>1) 犬猿の仲 </h4> 
<H4>2> サルとキジ </H4> 

</BODY> 
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#6.4.2. 上下マージン 

見出しは，ざつと眺めただけでもすぐに発見できるほど目立っているべきです.効果的に 
見出しをアピールするには，見出しの上下に大き目のマージンを入れるのが良いでしょう. 


• 上下マージン大…見出しと本文が遠い…内容の大きな変化をアピール…見出しレベルが高い 
• 上下マージン小…見出しと本文が近い…内容の小さな変化をアピール…見出しレベルが低い 

ただし，見出しの“上”は前セクションとの境，"下”はその見出しが表わすセクションと 
の接点です.したがって，上マージンは大きめに，下マージンは小さめにするほうが望まし 
いでしょう（図 6-7). 


図 6-7. 見出しと本文を上下マージンで差別化 



/•standards.css*/ 

/* 上下マージンを追加 */ 

@import url(standard.css) ; 

H2 {margin: 2.5em 0em} /* 上下マージン 2.5em*/ 
H3(margin: 3em 0em 2em 0em) 

/* 上，右，下，左 */ 

H4{margin: 2 .5em 0em 0em lem} 

H5{margin: 2em 0em 0em 1.3em} 

H6{margin: 2em 0em 0em 1.5em) 


#6.4.3. ボーダーライン 

見出し上下にボーダーラインを引けば，もっと直接的にセクションの区切りを表現できま 
す.全てのレベルの見出しにボーダーがあってはくどすぎますが，ボーダー付きの見出しを 
適度に混ぜることは効果的です. 


• 見出しの上のボーダ-前セクションの終わりを強調 

•見出しの下ボーダー……次セクションの始まりを強調 




border - style には立体的なものが幾つか用意されていますが，平坦な solid にした方が文 
字と馴染みやすいと思います. 
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図 6-8. 話の転換をアピールするボーダー 

H2{ 

border-width : lem 0em thin 0em; / • 上，右 ， ~K 左 */ 
border-style: solid none ： /* 上下，左右 */ 
padding : 2em 0em 0.5em 1.5em ： 



ボーダー指定と左右マージン.パデイングや text - align ブロパテイを適切に組み合わせると， 
見栄えの 「感じ」 はかなり変わります.見出しレベルの違いを考谢しながら，いくらか調幣 
してみるとよいでしよう（図 6-9). 


6-9. 少々凝ったボーダー例 
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/* 「図 6-5. 少々凝ったボーダー例」のスタイルシート */ 
/* fancy.css */ 

©import url(standards css); 

BODY{ 

background: #ffe; /* 淡い黄色〜クリーム色 */ 


} 

HU 

} 

H2{ 


lem 0em 2em 20 %； /*standard.css より左マージンを減らした 


text-align ： left ； 
font-weight: 900; 


- standard.css で center にしたのを戻した */ 
装飾に負けないように，太く */ 


border-width 

border-style 

border-color 


thick 0em 0em1.5em ； /* 上と左に太さの遑うボーダーを 
solid none none solia ； 

#390; 


padding : 0.5em 0.5em 0em 0.5em ； 


物 S ) 


次のように手っ取り早く指定しないのは何故でしょろ？ 
border-top ： thick solid #390; 
border-left : 1.5em solid #390; 

実は，これらのブロパテイを Netscape Navigator 4.0 がサボートしていないのです. 
現在のサボート状況に関しては，巻末資料をご!！ください. 


H3{ 

margin ： 2 .5em lem 1.5em 0.5em ； /* 右に陳 … ボーダーが左に寄る */ 
border-width : thin 0em 0em 0em ； /* 上だけに細いボーダーを */ 
border-style: solid none none none; 
padding : 0.5em 0em 0em 0.5em ； 


<©6.4.4. 通し番号を装飾 ( spanning ) 

(1) く SPAN CLASS="NUMBER"> 〜く/ SPAN〉 マークアップ 

見出しを更に装飾するために，通し番号 （1.1 .や 1.3.2.) と見出し語句そのものを別のものと 
して扱ってみましよう. 

そのためには，スタイル指定に先立って， HTML 文書中にマークアップで「通し番号」要素 
と「見出し語句」要素を明示する必要があります.これらは HTML 本来の要素としては用意 
されていないため， SPAN 要素と CLASS 属性を用いてマークアップします. 
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6.4 見出しの調整 


< H 1> 

<SPAN CLASS =" NUMBER ">1 •く/ SPAN > 

<SPAN CLASS=-MAIN-> ももたろうを考える </SPAN> 

</ Hl > 

< HR > 

< H 2> 

く SPAN CLASS = M NUMBER ,, >1.1.</ SPAN > 

<SPAN CLASS=_MAIN-> 出発まで </SPAN> 

</ H 2> 

< HR > 

< H 3> 

く SPAN CLASS =" NUMBER ,, >1.1.1-</ SPAN > 

く SPAN CLASS= B MAIN'> はじまりはじまり く/ SPAN> 
</ H 3> 


(2) インラインのまま装飾 

単純に SPAN . NUMBER のサイズと色を変えただけでも，見栄えにメリハリが生まれます 

(図 6-10). 


図 6-10. 通し番号をインラインのまま装飾 

/* fancy 2. css */ 

@ import url ( fancy . css ); 

SPAN.NUMBER{ 

font - size ： i .5 em ； 
color ： #33 f ; 
font - style ： italic ； 


f 1 . 1 . 出発まで 


1 . 1 . 1 . はじまりはじまり 


桃人•郎のは.おとぎに良くあるように.「むかしむかし.ある 
ところに』で始まりますおじいさんは山へ榮刈りに.おばあさんは川 
へ洗灌に行きます- 

ところで. M 近の人は丨荣 J をご作知でしょうか.，突とは無明係の t 
活をしているため. r 芝叫り j だと r 解している人もいるかもしれませ 
ん. 

r % 叫 oj は.«を取るために.お風 m をたくために.あるいは他の 
u 的のために坫れ枝を拾ってくることです。 r 荣 j は特定の ww ではな 
く .低木 • 》木钵兮«を枏して使われるのが»通です。 


1.1.2. 挑太郎の«生 


雉から1•:まれたので.挑太郎。なんて簡啉なネーミングでしょう。し 
かし.このさこそが名期の本質を衣わしています。 


cm 


図 6-10 はイメージ図ですが , Netscape Navigator 4.0 でも Internet Explorer 4.0 でも. 
ほぼこのとおりに表示されます 
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(3) ブロック化して装飾 

SPAN は本来インライン表示される要素です.インライン表示である限り，「前後の語句に 
連続するように表示される」というレイアウトに関する制限から逃れることはできません. 

各要素の表示形態は display ブロパテイによって変更できるのですから，ここでは表示をブ 
ロック化し，もうすこし複雑なレイアウトを目指してみましょう. 


X display プロパテイは.むやみやたらに変更するべきではありません.もし変更する塌合 
J は，結果を十分考應した上で指定してください. 







K 計が先，記述が後 


スタイルシートを記述するときには，あらかじめ目標イメージを明示し，それを眺めながら必要なブロパ 
テイを選び出し，定規などで測りながら値を決定してください.目標を持たずになんとなくブロパテイを窗 
き，なんとなく値を記述したところで.好ましい表示結果は得られません. 

r 分析—設計—実装』とはブロクラムを書く際の手顧ですが.スタイルシートでも同様です.まず，目標 
の決定.次に.値の決定.最後に.シートの記述.ただし，〖値の決定』には試行錯誤が必要です. 



♦ H 1 のための指定例 

通し番号のサイズを大き目にし左端に配沢し，語句は右側に配貺してみましょう（図6-11, 
6-12). 










6.4 見出しの調整 


/* book-hl.css ♦/ 

©import url(atomic.css); 

Hl{ 

font-size: 1.5em ； /*SPAN.NUMBER の大きさを考えて調整 */ 
margin：lem 0em 1.5em 0em ； /* 上，右，下，左 */ 
padding : lem; 
background ： #ffe ； 

border-width : 0.5em 0em; /* 上下，左右 */ 
border-style ： solid none ； 
border-color ： #aaf ； 
line-height : 1; 

> 

HI SPAN{ 

display ： block ； 

} 

HI SPAN.NUMBER{ 

font-size:3em ； 
font-weight ： 900; 
padding-right:lem ； 

width ： lem ； /*H1 の番号は最大でも 2 文字だと想定し，数字もピリオドも横方向に小さいため， 
半分の lem 程度で十分だろうと考えた */ 

float: left; 

> 

HI SPAN.MAIN{ 

text-a 丄 ign: right; 
padding-top ： lem ； 

} 


♦ H 2 のための指定例 

語句より少し左上に数値を配蹬してみましょう（図6-13， 6-14). 


図 6-13. H2 の指定の目標 


[目ネ票イメージ】 
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図 6-14. H2 のための分析•設計 


[発想法】 


• SPAN.NUMBER の上と左にボーダー 



/* book-h2.css */ 

@ import url(atomic.css); 

H2{ 

ront-size ： 1.5em ； 
margin: 3em lem 2em lem ； 

border-width : 0em 0em thin 0em ； /* 上，右，下，左 */ 
border-style: none none solid none ； 

} 

H2 SPAN{ 

display : block; 

} 

H2 SPAN.NUMBER{ 

font-size:1.5em; 
color ： #00f ； 

margin ： 0em auto 0emlem ； /* 右マージンを「残り」に指定 */ 

width: 3em; /*H2 の番号は最大でも 5 文字だと想定し，数字もピリオドも横方向に小さいため , 

半分程度，すなわち 3em 程度で十分だろうと考えた •/ 
border-width : thin 0em 0em 0 .5em ； / • 上，右，下，左 */ 
border-style ： solid none none solid; 
border-color ： #aaf ； 

} 

H2 SPAN.MAIN{ 

text-align: center; 
margin ： -0.5em 0em 0.5em 0em ； 


それでは，この 2 つをあわせたスタイルシートを作成しましょう. 





6.4 見出しの調整一< 


/♦ book.css ♦/ 

©import url(book-hl.css); 

©import url(t> 00 k-h2 .css); 

H3{ 

font-size:1.3em; 

margin : 2em 0em ； /* 上下マーンン 2em*/ 

} 

H4{ 

font-size ： 1.2em ； 

margin:lem 0em 0em 2em; /* 上マージン lem ， 下マージン 0 , 左マージン 2em*/ 

} 

P{ 

text-indent : lem; 

line-height:1.5em ； 

margin: 0.5em 0em ； /♦±"F, 左右 ./ 

} 

この book . css を使った文^!••の ， Netscape Navigator 4.0 による表示結果を図 6-15 に示します. 
結果を見て分かるとおり， em ユニットの処理がおかしいため「期待通り」とは行きませんが, 
ほぼ願いはかなえられているといってよいでしょう（巻末資料に ， Netscape Navigator 4.0 と 
Internet Explorer 4.0 の CSS 1サボート状況を添付します）. 




em のかわりに pt で記述しなおしたシートを用意すれば，この不具合は避けられます•あ 
まり望ましい行為ではありませんが.完全にサボートされるまでの過渡的な対策として仕 
方の無いことでしよろ. 



■ 


ももたろうを考える 
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一方， book . css による文書の Internet Explorer 4.0 による表示結果を図 6-16 に示します.テキ 
ストに対するフロー ト指定. width 指定などがサポートされていないため望みどおりの結果と 
はいえませんが，それでも文書構成を伝えることに関してはなんら遜色の無い結果だといえ 
るでしよう. 


図 6- 1 6. Internet Explorer 4.0 での book.css 


1 . ももたろうを考える 


■1_1- 出発まで 


1.1.1 •はじまりはじまり 

桃太邾のお K は，おとぎ括に良くあるように • r むかしむかし•あるところ 
に j で始まります • おじいさんは山へ茱刈りに，おばあさんは川へ洗*に行 
きます。 


©6.4.5. 非対応 WWW ブラウザへの配慮 

これまではスタイルシートを用いて文併スタイルを調整することばかり考えてきました. 
ところで，スタイルシートをオフにして文#を表示してみると，どんな感じになるでしよう 
か.本#が示した記述方法 （ HTML 文害とスタイルシートの両方）を守っている限り，シート 
無しでも文#内容の伝達には何の支障もありません.しかし，「見栄え」という意味では，少 
しさびしい表示になるのは仕方ありません. 

ところで，この節の例では，見出しをアピールするためにボーダーラインを付加しました. 
立ち返ってみれば，そのような「区切り線」は， HTML の HR 要素でも表現できます.スタ 
イルシートを適切に用いれば HR 要素は必要ないのですが，それでもしかし，非対応 WWW ブ 
ラウザのために HR 要素を付け足してみてはいかがでしようか. 

適切に HR 要素がマークアップされていれば，スタイルシートをオフにしてもある程度の見 
やすさ•読みやすさを確保できます.筆者は，仕切り線を想定した部分には HR 要素を記述す 
ることをお勧めします（図 6-17). そして，スタイルシート対応 WWW ブラウザに余分な表示 
をさせないために，スタイルシート中に 


HR 1 display: none} 
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6.4 見出しの調整 


と加えておきましょう. 


働 


以降では， atomic.css にこの宣言が書かれているものとします. 


図 6-13. スタイルシートオフ時のみ HR 要素を表示 


1_1出発まで 


1.1.1 •はじまりはじまり 


桃太郎のお話は.おとぎ»に負くあるように， re かしむかし.あると 
ころに』で始まります。おじいさんは山へ柴刈りに.おばあさんは川へ 
洗灌に行きます0 

ところで，最近の人は r * j をご存知でしょうか。柴とは*関係の生活 
をしているため，「芝刈り』だと》解している人もいるかもしれませ 
ん〇 

r 榮刈り j は. 》 を取るために.お風呂をたくために.あるいは他の目 
的のために枯れ枝を拾ってくることです。 r » j は特定の 樹糌 ではな 
く，低木 •嫌 木林全般を播して使われるのが普通です。 


1.1.2 旅太郎の»生 

桃から生まれたので，橈太»。なんて M ! 単なネーミングでしょう。しか 
し，この簡明さこそが名前の本質を表わしています。 






Transitional の驪性を利用する 

スタイルシート非対応 WWW ブラウザを使つている人のために， （HTML4.0-Strict では破棄されたもの 


の， Transitional では残されている）いくつかのスタイル規定のための属性を用いるのは悪いことではあり 
ません.たとえば， H1 〜 H6 要素や P 要素の ALIGN 属性を text-align プロパティの代替にすることは悪い 
ことではありません. 

ただし， Transitional の属性を使う際には.次の2点を守ってください. 


ODOCTYPE 宜首で 4.0-Transitional であることを明示する 

❷ スタイルシートを利用できない人に，スタイルシートの内容を伝える目的で， HTML の用意し 
た属性を利用する 

すなわち， [BODY 要素で色指定をしたから.スタイルシートでは色を指定しなくても良い J「HTML が用 
意している属性で指定できない部分だけスタイルシートを使えば良い J などとは考えないでください.その 
ように考えてしまつては，本末転倒です. Transitional の慂味は， r スタイルシートが普及するまでの過渡的 
手段』なのですから. 
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r _ 艏性 j と r 特殊性 j 

のノ\ランス 

#6.5.1. "DIV.MAIN" = "P + UL + BLOCKQUOTE" 

ここでは，特定の文脈を対象にしたスタイル指定を調整する際に必要なテクニックをお伝 
えします.例として，本文が段落 （ P 要素）•リスト （ UL 要素， OL 要素）•引用ブロック 
( BLOCKQUOTE 要素）によって構成されているケースを用います. 

この3者の左マージンを， P と UL は見出しに対して3文字分， BLOCKQUOTE は P や UL よ 
りさらに2文字分設定するにはどうすればいいでしょうか（図 6-18). 

図 6-18. 複数の要素からなる本文の左マージン 目標 図 

<BODY> 

く Hl> 私の PC</H1> 

<P> 私の PC の宣伝文句は，かの長島茂男さんがにこやかに語っていました . </P> 

<BLOCKQUOTE> 

<P> 「サボート体制で選べば，フローラ.」 </P> 

< /BLOCKQUOTE 〉 

<P> そう，日立のフローラです . </P> 

<P>1994 年に購入したため，いまやローエンドなスペックです . </P> 

<UL> 

<LI>Pentium75MHz 
<LI>RAM48MB (標準は 16MB) 

<LI> ハードディスク 512MB 
</UL> 

</BODY> 
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6.5 [■一般性 j と「特殊性』のバランス 


単純に考えれば，各要素に必要なマージンを直接設定すれば実現できます. 


P, UL{ margin-left ： 3em} 
BLOCKQUOTE{ margin-left: 5em} 


しかし，これでは 「 BLOCKQUOTE は P や UL よりも 2 文字多い」という関係が理解しにく 
くなってしまいます.さらに ， P • UL に対するマージンを変更したときには，関係を維持す 
るために BLOCKQUOTE のマージンも変更する必要があり， 大変メンテナンス性が悪い とい 
えます. 

これは，文書•構成が十分に示されていないために起こる混乱です.マージンは「親要素の 
マージンにどれだけ追加するか」という形で指定するため，構成が不明確だと指定に不整合 
が生じやすくなります.「段落•引用ブロック.リストが合わさって狭義の本文になっている」 
という構成をより明確にするために， DIV ブロックを追加しましょう（図 6-19). 


図 6-19. 本文の橘造ツリー 


<BODY> 

<H1> 私の PC</H1> 

<DIV CLASS="MAIN"> 

<P> 私の PC の宣伝文句は，かの長島茂男さん … </P> 
<BLOCKQUOTE> 

<p> 「サボート体制で選ベば，…」 </p> 
</BLOCKQUOTE> 

<P> そう，日立のフローラです . </P> 

<P>1994 年に購入したため，いまや … </P> 

<UL> 

<LI>Pentium75MHz 
<LI>RAM48MB (標準は 16MB> 

<LI> ハードディスク 512MB 
</UL> 

</DIV> 

</BODY> 



構成に沿って考えると，「見出しに対し3文字分の左マージン」を指定するべき対象は 
DIV . MAIN なのだと思い当たります. P や UL はそのマージンを修正せずに用いていますが, 
BLOCKQUOTE はさらに2文字多レ、マージンが欲しかったのです. 


DIV.MAIN { margin-left : 3em} 

DIV.MAIN BLOCKQUOTE { margin-left: 2em} /*DIV.MAIN よりも 2em 多い */ 

/* 仮に DIV.MAIN の左マージンを変更したとしても， BLOCKQUOTE との位置関係は不動 */ 
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このように，構成を明確にすればするほどスタイルシートの内容も明確になり，メンテナ 
ンス性も向上します. 

#6.5.2. 「特定の文書への対応』と「一般性確保』のジレンマ 

6.4.1 •では「狭義の本文」を 「 P と BLOCKQUOTE と UL 」 としましたが，場合によっては 
PRE が入るかもしれませんし，別の DIV が入り込むかもしれません.逆に， BLOCKQUOTE の 
無い文書もあるでしょう.すなわち， HTML 文書の構成は文書型定義で一般的に定義されてい 
ますが，その定義は大変に大まかなもので，実際の文書インスタンスの構成は全く特定でき 
ないのです. 

すると，図 6-18 のスタイルシートは，この文寄にはぴったり適用できまずが，ほかの文# 
もうまく機能するとは限りません.そもそも，わざわざ DIV . MAIN をマークアップした HTML 
文迸でなければ図 6-18 のスタイルシートは活用できないのです. 

「ある特定の文害に餃適のシート」を追い求めることと「一般性のあるシート」を追い求 
めることは，基本的に両立できません. 

6.5.3 .ジレンマと上手に付き合5方法 

両立できないものを無理に両立させようと努力するよりも，これらを分けて構築するほう 
が得策です.以降では，「どのように分けるべきか」について考えていきます. 

(1) 「一般」と「特殊』を分離する 

ところで，「一般性のあるシート」一多くの HTML 文書に適用できるシートーとはどのよう 
なものでしょう.端的には，基本的な要素だけへの宣言で構築した（すなわち，クラス， DIV , 
SPAN に頼らない）シートだと考えられます.本書で紹介した slandard . css や fancy . css はこれに 
当たります. 

クラス • D 1 V • SPAN を活用したシートを作る場合は， fancy 2. css のように「一般性のある 
シートを import して，特殊指定を追加する」ように書くのが贤いと思われます.なぜなら，想 
定した要素が無い場合は単に import したもとのシートとして機能するからです. 

すなわち，うまくジレンマと付き合うには，「基本的な要素だけへの宣言」と「特殊なクラ 
スゃ要素への宣言」を別シート（別ファイル）として構築しておくべきだと考えられます. 
そのようにして作られたシートを必要に応じて組み合わせていけば，常に一般的な効果を期 
待できます. 


186 



6.5 「一般性 j と「特殊性』のバランス 


(2) ごく特殊なものは STYLE 要素に押し込む 

ところで，シートが使いまわせるかどうかは，「想定するクラス • DIV • SPAN を利用した 
特殊な要素が，文脈上，親要素になるかどうか」である程度判断できます. 

たとえば， fan C y 2. css や book . css のように「期待する特殊な要素が，文脈上，単なる子要素で 
ある」場合には，期待する要素が存在しない場合でも，ある程度整合性の取れた表示になり 
ます（図 6-20). なぜなら，「その要素が無いこと」の影響が一部にとどまるからです.した 
がって，このシートは「ある程度使いまわしが効く」と判断できます. 


図 6-20. book . css を SPAN 指定の無し\文書に適用した塌合 


1•ももたろうを考える 


1.1. 出発まで 


1.1.1 •はじまりはじまり 

桃太»のお括は，おとき括に A くあるように， r むかしむかし，あるところ 
に j で始まります。おじいさんは山へ柴刈りにおばあさんは川へ洗漘に行 
きます。 


ところが，期待する特殊な要素が親要素となる場合（たとえば図 6-19) は上手くいきませ 
ん.なぜなら，「その要素が無いこと」の影骤が別の要素にも波及するからです. 

もし，図 6-19 のように「狭義の本文は，っねに DIV . MAIN と指定する」というルールを 
(自分独自のルールとして）常に守るのであれば，このようなシートも使いまわしが効きます. 
しかし，そうでないかぎり，そのシートは1回限りしか利用されないでしょう.ということは， 
特定の HTML 文書を対象にしたスタイルシートは， 一っの ファイルとして保存するのではな 
く，はじめから HTM じ文#に STYLE 要素として#き込んでおく（別の HTM じ文書から利用で 
きないようにする）のが贤いとおもわれます（逆に，使いまわしの効くシートは必ず独立し 
たファイルとして保存しましょう）. 

どちらにせよ，もっとも重要なのは「一般指定と特殊指定をひとっのシートに混在させな 
いこと」だと言えます.“二兎を追うものは一兎も得ず”です. 


187 




6 - 21 . 


road to mastering CSS 


. css の表示結果 


足りなくなると思われます. 


standard . css や fancy . css はそのままでも十分実用性のあるスタイルシートですが，実は本書の 
印刷代金との兼ね合いで白黒でも内容がはっきり伝わるように考礅した結果，色や画像 
をあまり使っていません. WWW では色や画像を気軽に使えるため，逆に，このままでは物 


筆者は， atomic . css に幾つかのボーダー-色指定 • 背误画を追加したものを自分用の標维ス 


タイルシートとして利用しています.参考までに，それをここで公開します. 


3.6.1. fks_cssj 


( 1 ) 表示結果 


SRC="music.gif ALT= B- >3/2</H3> 

&gt ; は今でも AMERICAN HERO か？ /</H4> 

<P>o)+&gt; の出演したマペット • トウナイトを見た . 音楽は 「Starfish 


シー ト』の例 












「一般性のあるシート J 


図 6-22. スタイルシートオフ時の表示結果 

せ 

みひとりごと 

1998年 


°^^ 3/2 

/<>>♦> は今でも AMERICAN HERO か ？/ 

oH> の出 ;'* L たマペット . トゥナイトを H ■ た。音翻 jrstarfish and CoffeJ と 「She her 

anfelj の 2 曲と，マペット ijW 、 取う「デ U リアス JrLefs Go CrazyJ だった。 

(2) 用意した 背景 画像 

スタイルシートはあくまで表示の調整の道具であり，[由 i 像の代替になるものではありませ 
ん.過度な画像埋め込みは望ましくないものの，スタイルシートだけで全ての表現効果を得 
ようとするのも K いことではありません.適切に両像を利用しましょう. 



@ import 
BODY{ 


black; 
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background ： #ffe ； 

} 

H2{ 

margin : 2.5em 2em ； /* 上下，左右.左右マージンを追加 .*/ 

border-width: 0em 0.5em; 

border-style: none solid; 

border-color: #aaf; 

padding : lem 2em ； /* パデイングを追加 */ 

} 

H3{ 

width: 100%; 

border-width : thin 0em 0em 0em; 
border-styles solid none none none ； 
padding : lem 0em ； 

} 

BLOCKQUOTE{ 

margin ： 2em; 

border-width ： 0.3em 0em ； / • 上下，左右 */ 
border-style: dotted none; 
border-color: #f88 ； 
font-family ： monospace; 
padding : 0.8em lem ； 

} 

/*ie-back.css*/ 

P STRONG{ 

color ： black ； 
background : #faa ； 
font-weight: bolder ； 

} 

A:link STRONG {background : #ccf; } 

A:visited STRONG{background ： #fcc；> 

A:active STRONG {background : #f88; } 

LI {margin-bottom:0.5em;} 




Netscape Navigator4.0 は background 系の処理が中途半端なため.まつたくサボート 
していないものよりもマズィ結果を生み出すことがあります.そこで， Netscape 
Navigator4.0 が @import を解釈できないという不具合を逆に利用し，別シートとして記 
述しました.これならば，すでに正常に機能する Internet Explorer4.0 には支陣ありませ 
んし，後に Netscape Navigator が CSS を完全サボートしたときにも上手く機能します. 
とはいえ，このテクニックは，あくまでも過渡的なものです. 
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6.6 「一般性のあるシート j の例 


(§ip^> 


同様に. Netscape Navigator4.0 は， LI 要素への指定を『マーカ ーJ への指定であると 
勘違いするため，おかしな表示結果になってしまいます. 


/*ks-back.css*/ 

H2{background: url("/back2.Dpg);} 

H3{background: url("/back3.gif) right center repeat-y;} 


@6.6.2. 「 prince.cssj 

(1) 表示例 





contents 


announce 




(2) スタイルシート 


/ ♦prince.css*/ 

©import url(atomic.css); 

@import url(ie-back.css); 
©import url(prince-back.css); 
BODY{ 

background:#646; 
color:#fed; 

> 

: link{color ： #0af} 

Hl{ 

font-size ： 3em; 

> 
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H2{ 

font-size:2em ； 

border-wiath : 0em 5em 0em 0.5em ； 
border-style ： none solid; 
border-color ： #a08 ； 
padding : 2em 0.5em lem 0.5em ； 
margin : 2em 0em 0.5em 0em ； 

) 

H3{ 

font-size ： 1.8em ； 

margin : 3em 0.2em lem 0em ； 

color ： #99c ； 

border-bottom-style : solid ； 
border - bottom-width:medium ； 
border-color ： red ； 
padding : 0em 0em 0.3em 0.5em ； 

} 

H4{ 

font-size ： 1.3c%i; 

margin ： 1.5em 0em 0.5em 0.5em ； 

) 

H5{ 

font-size:1.lem ； 

margin ： 0.5em 0em 0.5em 0.5em ； 

} 

.CAUTION{ 

margin ： lem lem lem 20%; 
border-width: 0em 0.5em 0em 3.5em ； 
border-style ： none solid ； 
border-color ： #f22; 
padding: 2em 0.5em 0.5em lem;; 

} 

BLOCKQUOTE{ 

margin ： 2em ； 

font : italic lem monospace; 
color ： #bbb ； 

border-width : 0em thick; 
border-style ： solid; 
border-color: #a40; 
padding : lem 0.5em;; 

} 
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6.6 「一般性のあるシート』の例-^ 


/ *pnnce-back. css*/ 

P STRONG{ 

color ： #404; 
background : #a4a ； 

} 

• SAD{ 

color ： red ； 

background : transparent; 

font ： 900 italic 1.2em monospace; 

} 

® 6.6.3. rzappa.cssj 


( i ) 表示例 



(2) スタイルシート 

/♦zappa.css*/ 

©import url(ie-back.css); 
BODY{ 

color ： #fed; 
background : #555; 

} 

: link{color ： #0af} 
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Hl{ 


font-size ： 3em ； 

} 

H2{ 

font-size ： 2.4em ； 
margin:lem 2em ； 
color ： #d9d ； 
text-align : center; 

} 

H3{ 

font-size:1.6em ； 

border-width: 0em 0em thick 0 em; 
border-style ： solid; 
border-color ： #888; 
padding : 0em 0em 0.5em 0.5em ；； 
margin ： 2.5em 0em lem 0em ； 

} 

H4{ 

font-size:1.3em; 

> 

H5{ 

font-size ： l.lem ； 

} 

BLOCKQUOTE{ 

margin ： 1.5em lem 1.5em 3em ； 
border-width: 0em 0em 0em thick ； 
border-style ： none none none solid; 
border-color: #969 ； 
padding : lem lem lem 2em ； 

} 

H4 {margin ： 2.5em 0em 0em lem} 

H5{margin ： 2em 0em 0em 1.3em} 

H6{margin ： 2em 0em 0em 1.5em} 




6.6 「一般性のあるシート』の例 




隊 

終わりに 


6穿では，スタイルシートを記述するための発想法を紹介しました.本遨の指針に従えば， 
HTML 交!？}:(こもスタイルシートにも無现の無い形で向名•を連携させられるようになります. 

スタイルシートは， HTML と比べて「はじめの一歩」を踏み出すまでに必要となる知識が多 
いためか，まだあまり利されていないのが現状です.しかし，スタイルシートは実に魅力 
的な道具です.ぜひスタイルシートについて学び，活⑴してみてください.本#の内容が钾 
様の「はじめの一歩」の丁•.助けになることを願います. 


► 考え方のまとめ 

•先に文害の構造•構成を明確にしましょう.同時に， HTML 文畜からスタイル情報を排除し 
ましょ？. 

•スタイルは，構成をわかりやすく （本文は本文らしく，見出しは見出しらしく）することを 
目的に指定しましょう. 

•スタイルは，文害構造にしたがって，「一般—例外」の順に指定しましょう. 

• 対応していない WWW ブラウザ利用者のことも考え，スタイルシートをオフにしたときに 
もわかりやすいかどうかをチェックしましよう. 

• 一般性のある指定と特定の文害用の指定を分離しましょう.前者は独立したファイルに保存 
し，後者は対象にした HTML 文害内に埋め込みましょう. 

► 技術面のまとめ（指定決定までの手順） 

• 目標の表示結果を明確にする. 

•理想図から，文書構成を読み取る.（この際に，要素ごとの表示範囲を図に害き込むとより 
わかりやすくなる.）もし文書マークアップが不十分であると判明したら，追加•修正する_ 

•各要素のフォントサイズ，マージン，パディングなどを計測する.できる限り em ユニット 
やパーセントによる値を考える. 

•設計にしたがって，スタイルシートを記述する. 

•場合に応じて，シートの分割や取り込みを試みる. 
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new feature 


7 章では， CSS 2 で追加された新たなブロパティを紹介します. CSS 2 で追加された印刷時の 
考慮.音声再生の考應によって， HTML 文書は WWW のみならず広範囲に有効な文書フォーマ 
ツ トになるでしよろ. 

総評ですが， CSS 2 で追加された新たな側面は，全般に扱いの難しい，どちらかといえばプ 
ロ フェツシヨ ナル向けのものばかりです.もっとも， CSS 1 が一般的なブロパテイを網羅して 
おり， CSS 2 はそれの上位互換として足りなかった部分を追加したのですから，その狙いが高 
度になっているのは当然だといえます. 


Chapter 7 new feature in CSS 





#)7.1.1. 導入された概念 

► viewport (頭き窓） 

スクロール 可能な メディ アで，実際に表示されている部分を指す概念です. 

► containing block (コンテナブロック） 

ある要素に注0した場合に，その要素のブロック系親要濃の中でもっとも近い親を指す概 
念です.マージンやパデイングの計算で利用されます. 


► Anonymous block boxes (匿名ブロック） 

ブロックコンテナ系要素に直に記述されたインライン系要素が存在する時に，親子バラン 
スを取るために揷入されるコンテナブロックです. 

HTML3.2 および 4.0Transisional では，ブロックを含みうる要素 （DIV • BLOCKQUOTE - 
BODY など）の子要ぶ•は f(%inline; I %block;)*J であり，図 7-1 のような記述も肸されます. 


図 7- 1 .anonymous block box のある記述 
<BODY> 

事前に <A HREF="maegaki .html 11 〉 前害き </A> を読んでください. 
<H1> 第1章：プリンスとの出会い </Hl> 

それは，岡村靖幸との出会いから始まる. 

<P> 岡村靖幸は… 

</BODY> 


しかし，# PCDATA の位置的な親子バランスを考えた場合，図 7-2 の記述のほうが望まし 
いといえます. 
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7.1 表示の位置決め 一く 


図 7-2. anonymous block box の無し、記述 
く BODY 〉 

< P > 事前に <A HREF=**maegaki . html 1 *〉 前害き </ A > を読んでください. 
< H 1> 第1章：プリンスとの出会い </ Hl > 

< P > それは，岡村靖幸との出会いから始まる. 

< P > 岡村靖幸は… 

</BODY> 


すなわち，図 7-1 には BODY の直接の，子要素としてインライン系要素 （# PCDATA ) が 
存在しています.表示整形上，この# PCDATA のコンテナブロックを BODY と考えるよりも， 
見えないブロック系要素がコンテナになっていると考えたほうが得策です.その，存在しな 
いコンテナブロックを「匿名ブロック」と呼びます. 


► Anonymous inline boxes (匿名インライン） 

普通のブロック系要素の子要ぶ•のうち，インライン系要素にラップされていない直の 
# PCDATA を指す概念です. 


〇〇 


f < P>Some < EM > emphasized </ EM > textj のうち ， 「Some J と f textj のこと. 


#7.1.2. 位置決めの概念 


♦ 


^ top, right, bottom, left オフセットブ ロバテイ _ 

値 く一般サイズ> 丨 < パーセント > 丨 auto 

初期値 auto 

適用対象 位》指定される要素（注： display ブロパティが static 以外？） 

パーセントの意味 コンテントブロックの width / height に対する割合 

进承される？ no 


♦ 


辱 


勢 


袈ぶの表示位!?(を調整するために利⑴します.指定する値は，オフセット値すなわち移動 


; ii : です.何に対するオフセット侦であるのかは， position プロパティの値で決定されます（こ 
れらのプロパティは，図表など，特殊な場合にのみ利用するようにしてください.通常は, 
オフセツト0, positon は static です）. 
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osition 位置決めアルゴリズム 


値 

static 1 relative 1 absolute 1 fixed 

初期値 

static 

適用対象 

自動生成以外の全要素 

k 継承される？ 

—22-^ 


-ット指定の適用方法を指定します.各キーワードの意味は表 7-1 のとぉりです. 


ブロパテイのキーワードの解説 


キーワード 解説 



relative 


absolute 



通常の指定. left ブロパテイと top プロハ•テイは適用されない 
(注: right と bottom は？). 


static で表示されるべき位譖からのオフセツトで表示位 S を決定する. 


ツクからのオフセツトで表示位 S を決定する. 


連続メディア（スクロールメディア）では. viewport に対する位置として 
絶対位匿が計算され.スクロールに流されずに常に表示される.ページメ 
ディアでは.ページに対する位 E として絶対位 S が計算される. 


仕様書では各指定に関する細かい事例を取り上げて解説していますが, 
は蹐み込みません. 


^ znndex 重ねあわせ表示の優先顆位 

値 auto I <整数> 

初期値 auto 

適用対象 位匾指定される要棄（注： display ブロパティが static 以外？） 

进承される？ no 


表示が: t なった場合の「背後に移動」「前面に移動」の順序付けを指定します 
ほど背後に表示されます. 


1.3. 記述の流れ 


※ direction 

文章の流れる方向 

値 

Itr 1 rtl 

初期値 

Itr 

適用対象 

全要索 

継承される？ 

yes 













7.1 表示の位置決め 一く 


国際化対処の一環で，記述の流れが「左—右 (left to right : ltr ) J であるか「右—左 (right to 
left : rtf )」 であるかを指定します.この値によって，左右マージンなどの auto 時の計算方法な 
どが調整されます. 


※ unicode-bidi ユニコード 

ユニコード処理に関係するフロパテイですが，本窖では省略します. 


©7.1.4. 表示内容の調整 






※ overflow 

i 

初期値 
適用対象 
継承される？ 


はみ出した場合の処理方法 


visible I hidden I scroll I auto 
visible 

ブロック系要素と B 換要索 
no 


次のような場合には，表示すべき内容が表示枠 ( Wifli , ページ，あるいは指定した表示枠) 
からはみ出してしまう可能性があります. 


• 絶対位置指定で表示している場合 
• マイナスのマージンを指定した場合 

• width や height を明示した場合 

• white-space プロパティで pre 指定した場合 

overflow ブロパテイは，はみ出してしまった部分の処理方法を指定するブロパテイです（表 


表 7-2. overflow プロパティのキーワードの解説 




visible 

はみ出してでも表示（枠を破棄しても構わない） 

hidden 

見えない部分はそれで構わない（見えないままにしておく） 

scroll 

スクロールバーなどを用いることで見えるようにする 


(小さな viewport を生成する）（印刷などの場合は. visible 処理する） 


visible 以外の指定では， clip プロパティで表示すべき領域の形状を指定します.しかし, 
CSS 2 の段階ではまだ十分な検討が済んでいないようですので，ここでは省略します. 
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要素を表示するか否かを指定します. 「 display : noneJ では要素を#在しないものと処理しま 
すが， 「 visibility : hidden 」 では「要素は存在するが表示しない」ことになります.具体的には， 
「 visibility : hidden 」 では，その要ぶを衣/ ji するために必要なだけの空白が表示されます. 


cm 


collapse は TABLE 用の hidden であるようですが.仕様 S では具体的な差異が分かりま 
せんでした. 


この指定を丨: hover 」 疑似クラスなどと組み合わせると，ちょっとしたトリッキーな効果を 
得られます.ただし，やりすぎにはご注意を！ 


DIV.HIDE A{visibility : hidden} 
DIV.HIDE A ： hover{visibility : visible} 


<DIV CLASS="HIDE-> 

<P> あなたを <A HREF="http: //www.asahi-net .or. jp/^jy3k-sm/i_net/books .html" 
アヤシイ世界 </A> に案内します . 

</DIV> 


@ips) 


のアンカーの文字はマウスをかざしたときしか表示されない. 
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7.2 自動生成文字一 < 



「: befo re 」 疑似要桌と r ： afterj 疑似要ぶの枓体的な内界を指定するブロパテイです.任想の 
文字列，_像やサウンド（を指す URL ), カウンタ，リ I 川符，およびその組み合わせが指定可 
能です.なお，リ I 叫符とカウンタについては後述します. 


attr ( x ) は， HTML 文畓における属性値を content として表示させるためのキーワードです•そ 
の诚性に値が無い場合は空文字が表示されます. 「 A:before | content : T attr ( REL ) であれ 
ば，図 7-3 のように表示されます. 
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》一 Chapter 7 new feature in CSS 


ao < 文字列〉には""が必要であることに注意してください. 


図 7-3. atU ( X ) 利用例 
<STYLE TYPE= ■ text / css ■> 

A ： before { content : T attr ( REL ) 

</STYLE> 

<P > 目次 
<UL> 

<LIxA HREF= B l.html B REL= ， NEXT_> 第 1 章：プリンスとの出会い </A> 
<LIxA HREF=-2.html-> 第 2 章：情報を追い求めて </A> 


<LIxA HREF= ■ appendex . html - REL=_APPENDIX-> 索弓 I </A> 
</UL> 


目次 

• [ NEXT ] 第 1 章：プリンスとの出会い 
•□第2章：情報を追い求めて 


• [ APPENDIX ] 索弓 I 


改行 

CSS 1 では BR 要素を表現するブロパテイは用意されませんでした.このことは課題として残されていた 
のですが，ついに CSS 2 で実現できるよろになりました. 

BR：before { content : "VA"} 

文字列の¥はエスケープシーケンス用のメタキヤラで. ¥ A は改行文字なのです！ 

…な.なんだかインチキ臭いんですが.ともかくこれで実現可能です. 


©7.2.2. 引用符 

► content プロパティにおける引用符指定 

• open - quote , close-quote 

quotes ブロパティで指定した「引用符開く」「引用符閉じる」の記号が表示されます.引用 
ネストの深さに応じた引用符が自動的に選択されます. 

• no - open-quote and no - close-quote 

引用符を表示せずに，引用ネストの深さだけを変更します. 
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7.2 自動生成文字一 < 


Q：before { content : open-quote } 

Q：berore { content : close-quote } 

< P > ボブディランは < Q >3 0才以上のヤツを信用するな </ Q > と言った. 


ボブデイランは「30 才以上の ヤツを 信用す るな」と言った. 


^ quotes 

fi" 

初期値 
適用対象 
进承される？ 


引用符 

[< 文字列 > < 文字列〉]+丨 none 
/•開く 閉じる開く 閉じる…*/ 
実装依存 
全要素 
yes 


comem プロパティの引⑴符指定に呼応する引用符を指定します.「くひらく > <閉じる >」の 
セットでのみ指定できます.複数の引 / H 符を指定すると，引用ネストの深さに応じた引用符 
を設定したことになります. 


quotes : ■ "}■ _【 ■ ■]■ "C ■)"; 

{[()]> 

カンマ区切りではなく，空白区切りです. 

なお，5穿で紹介した: lung 疑似クラスを川ぃれば，3語の違ぃを芩你;した指定が叮能です. 

Q:lang(en) { quotes: … … ■•霧 /*English*/ 

Q:lang(ja) { quotes: _ I _ /*Japanese*/ 

0 文字列として r " j を記述したい塌合は.全体を"で囲むことになります. 

余談ですが，必ずしも fz ; 統的な引用符を用ぃる必要はありません. 

BLOCKQUOTE {quotes : ■ (引用開始） ■ ■ (引用終了）-} 

content ブロパテイの指定抜きで quote ブロパテイを指定しても，引用符は表示されませ 
A,. このことには十分ご注意ください. 
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®7.2.3. カウンタ（通し番号） 

► content プロパティのカウンタ指定 

文#記述者は，「カウンタ名」を記述することでその名前のカウンタを利用できるようにな 
ります.プログラミングにおける変数宣言のようなものはなく，以降の例のように「カウン 
夕名」を利川し始めるだけで， fl 動的に対応するカウンタが作成されます.カウント制御は 
カウンタ名ごとに独立して行われます.なお，「カウンタ」はいくつでも作成できます. 

カウンタ侦を表示するには， content ブロパテイの倘として 「 count (くカウンタ名〉)」を指定 
します. 


@ips) 


「カウンタ名 J に利用できる文字は.ラテンアルフアベットの ra-zj FA - ZJ . 数字「0- 
9 J それにハイフント j のみです.始めの1文字はラテンアルフアベットのみです.廠 
密には . ISO 10646 characters の161番以上も許されます. 


HI:before{ 

content : counter("chapter-num") • 軍 •• • ; 

) 


ただし，これだけではカウンタの侦が決定されません.「カウントアップ」と「値のリセッ 
卜」には次のプロパティを用います. 






※ counter-increment 

値 

初期値 
適用対象 
进承される？ 

マイナス値 


増減させるカウンタの指定 


[ <カウンタ名 > < 整数〉？]+ I none 

/* カウンタ名，カウントアツブ值 V 

none 

全要素 

no 

可 


このプロパティが指定されていると，その要素が現れるたびに，記述したカウンタが指定 
した倘だけ W 減します.カウントアップ値を宵略した場合は，「1」が指定されます. 
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※ counter-reset 

値 

初期値 
適用対象 
継承される？ 

マイナス値 


リセツトするカウンタの指定 


[ <カウンタ名〉< 整数〉？]+ I none 

/* カウンタ名，リセット値*/ 

none 

全要素 

no 

可 


このプロパティが指定されていると，その要素が現れるたびに，指定したカウンタの値が 
指定値にリセットされます.リセット値を宵略した場合は，「0」にリセットされます. 


► 利用例 

Ichapter - num 」 と Uection - num 」 の2つのカウンタを利用してみましよう ( CSS 2 仕様書 12.5 
を改定). 

HI : before { 

display ： inline; 

counter-increment : "chapter-num "； /* カウンタ fchapter-numj に 1 力卩真 */ 

content : counter(■chapter-num") m M ' m ; 

counter-reset : "section-num "； /* カウンタ 「 section-numj を 0 にリセット */ 

> 

H2 ： before { 

display ： inline ； 

counter-increment : ■ section-num"; / •カワンタ rsection-numj に 1 加算 •/ 

content : counter("chapter-num") counter("section-num") ■ : 

} 

<H1> はじめに </Hl> 

<H2>Frank Zappa とは </H2> 

<H2> そのアルバムの数 </H2> 

く H1>ZAPPA アルバム全紹介く / Hl> 


ほ 

はじめに 

1.1 

Frank Zappa とは 

1.2 

そのアルバムの数 

I 2章 

ZAPPA アルバム全紹介 


カウンタ値の表示，カウントアップ，リセットの仕組みが独立しているため，「カウントア 
ッブだけして表示しない」「表示だけしてカウントアップしない」という指定も自由自在です. 
必要に応じてお試しください. 
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カウンタのネストとスコープ 


カウンタを利用するのは，見出しやリストに通し番号を付与する時が大部分だと思われます.例では見出し 
のみを取り上げましたが， 0 L 要素のカウントアップも上記の説明と同じようにして記述可能です. 

ところで，リストのネスト時の処理はどうなるのでしよう.構造化プログラミングなどを経験していない人 
には分かりにくいところだとは思いますが， r リストにおけるカウンタのスコープは，リストのネスト状況に 
合わせてネストします J というの力笔えです（次例のソースは， CSS 2 仕様 S 12.5.1 を改定したものです). 


OL icounter - reset : item } 

LIiberore { 

content : counter ( item ) 
counter - increment : item 

> 

< P > 好きな食べ物 
<0 L > 

< LI > 麵 
<0 L > 

< LI > うどん 
< LI > スパゲッティ 
</0 L > 

<1/：>肉 

<0 L > 

< LI > 鶏肉 
< LI > 牛豚合挽 
</0 L > 

</0 L > 


好きな食べ物 

1.麵 

1•うどん 
2•スパゲッティ 
2•肉 
[鶏肉 
2.牛豚合挽 


► fa , b ， c …」なカウント 

数値ではなく， lower - roman や katakana でカウントアップしたい場合は， content ブロパテ 
の値として 「counter (くカウンタ名〉， < lisl - style - type >>」 を指定します（カンマ区切りです) 
この場合は，「1，2,3……」ではなく， 「 a ， b，c ……」「い，ろ，は……」とカウントアップされます. 








7.3 ページメディアべ 



ページメディア 


CSS 2 の段階では，ごく基本的な印刷制御ブロパティが用意されただけで，数多くのネタが 
「今後の課題」になっています.以降にあげるネタには未対応です（ページメディアといって 
も印刷とは限らないのですが，一般には「印刷」だと受け止めても支障はないでしょう）. 

• 一枚の紙面を拡大して数ページに割り付ける （ n - up ) 

• 数枚の紙面を縮小して1ページに割り付ける ( tiling ) 

•段組 

•柱やノンブル（すべてのページに存在する「第何章」とか「ページ数」） 

®)7.3.1. @ page セレクタ 

ページそのもののサイズなどを指定するために，セレクタ 「@ page 」 を導入します. 
「@ page 」 セレクタにはサイズとマージンを指定できますが，ボーダーやパディングは今後の 
課題になっています.各ブロパティのパーセント指定は，紙のサイズを指定する size ブロパテ 
ィからの相対記述になります.なお， em ユニットは使えません.また，ページへの指定は継 
承の計符に組み入れません. 

とくに印刷時の左右ページを指定する場合には， 「@ page : leftj 「@ page : right 」 疑似クラスを 
使用します.さらに，「煅初のページ」として 「@ pag e : first 」 が用意されています. 

©page i size 8.5in 111 n; margin: 2cm } 

@page：left { margin ： 2cm 2cm 2cm 3cm }/* 上，右，下，左*/ 

@page : right { margin ： 2cm 3cm 2cm 2cm } 
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#7.3.2. r @ pagej セレクタ用ブロバテイ 



卜べて相対指定です（表7く 


ブロパテイのキーワードの解説 


「現作の紙サイ 


紙サイズの指定によっては，文■内容がページに収まらない可能性があります.仕様書には.ころいろ埸 
合に WWW ブラウザが行ろべき処理までが書かれています. 


1:紙の縱横をかえてみる 
2:サイズをかえる 


それでも駄目であれば，はみ出した部分は印刷されないことになります. 

余談ですが，紙サイズよりもページ設定サイズが極端に小さい塌合は. WWW ブラウザは自動的に f * ん 
中寄せ j などの処理をするだろろ，とも8かれています. 


〔表7-4，図 7-4). なお，その形状，サイズなどは WWW ブラウザに一任されてい 


[crop II cross ] I none 
/* 裁ち切りトンボ位霾あわせ 


初期値 
適用対象 


none 


ベージ 


ところの「トンボ（ページものの四隅にある丨ページの範囲を示す位置決めマー 


※如 紙面サイざ 

値 く 絶対サイズ >{1 ,2} I auto I portrait I landscape 

/♦width height :一方のみ指定時は正方形に*/ 
初期値 auto 


適用対象 


ページ 


紙面サイズを指定します. <絶対サ 


キーフード 


解説 


現在の紙サイズで.縦謖き 
現在の紙サイズで.橘®き 
現在の設定のまま 










mark プロパティのキーワードの解説 


キーワード 

解説 

crop 

cross 

裁ち切り位置を指定するトンボ 

複数の紙を重ねる時の位■決めスボツトを指定するトンボ 


図 7-4. トンボ 


文害領域 


#7.3.3. ページメディア専用プロパティ 




no 


爭 


※ page - break - before , page - break-after &ぺーシ 

値 auto I always I avoid I left I right 

初期値 auto 

適用対象 ブロック系要素 

継承される？ 


その要素の「始め」「終わり」で改ページするかしないかを指定します（表 7-5). 


表 7-5. page - break 系ブロパティのキーワードの解説 


I キーワード 

解説 1 

auto 

WWW ブラウザに一任 

always 

常に改ページする 

avoid 

改ページを避ける 

left 

1あるいは2ページ分改ページして，左ページへ 

right 

1あるいは2ページ分改ページして，右ページへ 
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出版における惯例では，横書きでは r 大見出しによる大扉」を必ず右ページ（縦書きでは 
必ず左ページ）に配置し，中見出しでは優先的に改ページします. 


※ page-break-inside 泣孝^れ 

初期値 
適用対象 
进承される？ 


auto I avoid 
auto 

ブロック系要素 
yes 


「 page - break - inside : avoid 」 では，指定した要素の最中にページ区切りが来る場合に,無理に 
そのページに押し込むか，全体を次ページに送り込みます.しかし，どうしても上手く処 ？ H 
できない ケース も存在しますのであしからず. 


※ orpnans , widows 

初期值 
適用対象 
进承される？ 


泣き別れ条件（孤児，やもめ ) 

<整数> 

2 

ブロック系要素 
yes 


rorphans (孤児）」とは，組版; lj 語で「前ページに残す行」のことです.また ， 「widows 
(やもめ）」とは，「次ページに送る行」です.各ブロパテイには，それぞれの泣き別れの「姣 
小倘」を指定します. 

WWW ブラウザは， page - break 系ブロパテイの指示にしたがって改ページ処理をした後，こ 
の指定を参考にページ送りを調整します.すなわち， orphans や widows が指定値以下のブロッ 
クが存在する場合には，要素佥体を次のページに送り込むなどの処理をします. 


@ip^> 


泣き別れは， position 指定が absolute および fixed の塌合は考應されません . absolute 
や fixed では「ページからはみ出した J 塌合の処理に準じ，端的には「はみ出した部分は 
印刷しない j ことになります. 


仕様逬には，さらに細かい処理の指針が提示されているのですが，それらは WWW ブラウ 
ザへの指示であるために，ここでは竹略します. 

藝 7.3.4. 名前付き 「@pagej と 「 page 』 プロパティ 

► 名前付き r@pagej 

図表などの表現のために，印刷途中で ページの縦横を 変更したり， サイズを 変更したいこ 
とがあります.そのために，名前付き 「@ page 」 を用意し，文章中でページを切り替えられる 
よう になって います. 
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7.3 ページメディア ーく 


名前付きページは 「@page <ページ名 >」（空白区切り）で記述します.各要素をどの 
@ page で印刷するのかは， page プロパティで指定します. 


^ip§> 


r ページ名』に利用できる文字は，『カウンタ名 j と同じく.ラテンアルフアベツトの 「 a - 
zj rA - zj . 数字 ro -9 j それにハイフン r-j のみです.はじめの i 文字は，ラテンアルフ 
アベットのみです.厳密には， ISO 10646 characters の161番以上も許されます. 


@page{size: portrait} 

©page "lana"isize ： landscape} 

TABLE {page: ■land"; page-break-before : right} 


^ page ゴーを名の指定 

値 

初期値 
適用対象 
継承される？ 


<ページ名> I auto 
auto 

ブロック系要粟 
yes 


1:で説明したくページ名>を指ボするためのプロバテイです. 
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フォント遥択の拡張 


これは，とくにプロフェッショナル向けだと思われますので，詳細は CSS 2 仕様書に譲り， 
ここでは考え方を簡中-にまとめるだけにとどめます. 

<©7.4.1. T @ font-faceJ 

CSS 2 では，記述者が念頭においているフォントの各種特徴をスタイルシート中に？ f き込む 
ためのセクション 「@ font - face | lJ を定義しました.この悄報をもとに， WWW ブラウザは 
「各神:特徴が似たフォントを探す」「似たフォントを修正して作る」「フォントをダウンロード 
する」といった対処が吋能になります. 

@ font-face { 

font-family ： "Robson Celtic - ; 
src: url(http ： //site/fonts/rob-celt) 

} 

HI{ font-family ： ■Robson Celtic - , serif } 

CSS 2 什様押15.3」の例を引用して， WWW ブラウザの処理を紹介します.先のシートの場 
合，出には 「Robson Celtic 」 というフォントファミリーが指定されています. CSS 2 対応の 
WWW ブラウザは，このフォントがシステムに存在しない場合，対応する @ font - face 記述を探 
します.この例では，発兑した @ font - face にはソースファイルの URL しか記述されていない 
ため， WWW ブラウザはキャッシュからそのファイルを探すか，フォントのダウンロードを 
試みます.それらによるデータの人手に失敗したら，系統名である serif に適するフォントを 
システム内部から選択し，表示します. 

®7.4.2. r @ font-faceJ 内部の記述 

@ font - face の内部に記述するのは，プロパティではなく記述子 （ Descriptors ) と呼ばれるも 
のです.すなわち，記述子を用いて，フォントの性質を記述するのです. 
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7.4 フォント選択の拡張 一く 


► フオント選択のための記述子 

font - family , font - style , font - variant , font - weight , font - stretch , font-size 

次の 「src (ソース）プロパティ」とあわせて利用します.これらの記述子は，「これこれこ 
ういう組み合わせのブロパティが指定された時は，このソースで指定したフォントを使って 
欲しい」といった情報を記述するものです.値のリストアップはカンマ区切りで行います. 


• 使い方の例 

中ゴジック，極太ゴジックの2つのファミリーが利用できるとします.スタイルシート中に 
「ゴジック」というファミリーを記述した時に，その weight の1⑻〜500を中ゴジックで， 6( X ) 
、900を極太ゴジックで衣示させたいとします.それを実現するのは，次の記述です. 


@ font-facet 

font-family ： ■ ゴジック ■ 

font-weight :100, 200, 300, 400, 500; 

src ： local( 1 • 中ゴジック ■); 

} 

@font-face{ 

font-family: ■ ゴジツク ■; 

font-weight: 600, 700, 800, 900; 

src ： local (■ 極太ゴジックつ； 

} 






※ ソースの指定 src 

m 




初期値 


[< URL > [ format (く 文字列 > [，く 文字列 >]*)] I local (く 文字列 〉）] 

[• < URL > [ format (く 文字列 > [•く 文字列 >]*)] I local (く 文字列 〉）]* 
/* URL フオーマツ ト指定丨フ オン ト フェース*/ 

定義されない 


爆，. 


想定するフォントフアイルのソースを指定します.その記述方法は以下のとおりです. 


• format () による フォーマツ ト指定 

記述した URL のフォントデータのフォーマット（形式）を指定します.想定されているフ 
オーマツト名は 表 7-6 のとぉりです. 
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表 7-6. フオントフオーマツト （ CSS2 仕様 a15.3.5 より転教 ) 


キーワード 

説明 

拡張子 

"truedoc-pfr" 

TrueDoc™ Portable Font Resource 

•pfr 

"embedded-opentype" 

Embedded OpenType 

•eot 

n type-1" 

PostScript™ Type 1 

.pfb, .pfa 

"truetype" 

TrueType 

•ttf 

•’opentype" 

OpenType. including TrueType Open 

•ttf 

__truetype-gx" 

TrueType with GX extensions 


"speedo" 

Speedo 


"intellifont" 

Intellifont 



• local () によるフォントフェース指定 
ロー カルフォントをフルネームで#いたもの，と説明されています. 

•例 ( CSS 2 仕様 ■15.3.5 より転載) 

src ： url(http ： //foo/bar )； 

src ： local(_BT Century 751 No. 2 Semi Bold Italic ")； 
src: url(../fonts/bar) format("truedoc-pfr ")； 

src: url(http ： //cgi-bin/bar?stuff) format("opentype", ■intellifont■); 


v src 記述子の定義をみると . format (> を伴わない URL の記述は許されていないのですが， 

^ ここには 8 かれています . 

► マッチングに用いる記述子 

panose -1, stemv , stemh , slope , cap - height , x - height , ascent , descent 

具体的なソースや形状を記述するのではなく，外形的な特徴を指定することで， WWW ブ 
ラウザに相当するフォントを探させるものです.ここにあげた記述子は綿密な関連を持って 
いるため，幾つかが欠けただけでも（組み合わせによっては）マッチング計算が不可能にな 
ります. 

• panose - 1 

TrueTypeFont のマッチング定数.ラテン系独特の定数. 

• stemv , stemh 

軸 （ stem ) の vertical と horizontal の幅 . 

• slope 

傾斜.ただし，傾斜があるからといって italic 系だとは限らない. 
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7.4 フォント選択の拡張一 < 


• cap-height, x-height, ascent，descent 
読んで字のごとし. 

仕様書では独立した区分になっていますが，次の記述子もいっしょに紹介します. 

• units-per-em 

1文字を表現するのに使われる座標点の数.マッチング計算で用いられる. css2 仕様#によ 
ると，具体的な値は 表 7-7 のとおり. 


表 7-7. units-per-em の値の例 


Intellifont 

25 

Type 1 

1000 

TrueType, TrueType GX. OpenType 

2048 


► フオント修正に用いる記述子 
'widths', 'bbox' and 'definition-src' 

既存のフォントを修正して望みに合うようにするための記述了へ 

• widths 

Unicode の renge と，その文字が占める width を指定 

• bbox 

文字を表示するのに必要な矩形 

• definition-src 

@font-face 指定のある別シートの URL を言己述 

ほかにも 「baseline」「centerline」「mathline」「topline」 とぃう記述子があり,それぞれ名前が 
示すとおりですが，帘者イく明のため，與体的にどんな値がどのような意味になるのかは不明 
です. 

► その他 

• unicode-range 

UNICODE のどの範囲をカバーするのかを記述します. 
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仕様 i 1 !: にある TABLE 閲連の記述の多くは WWW ブラウザの処理方法 （ WWW ブラウザベン 
ダ向け）ですので，これもある程度朽略しながら話を進めます. 

#7.5.1. display ブロバテイの値と部位の関係 

CSS 2 が想定するのは必ずしも HTML 4.0 文也とは限りませんが， TABLE モデルは HTML 4.0 
を基本にしています. XML などで文开彻定義を作する方は，表 7-8 の位沢づけを参考にし 
てスタイルシートを記述してください. 


表 7-8. CSS 2 における TABLE モデル （ display ブロパテイの値) 




table 

TABLE 

inline-table 

TABLE(display: inline) 

table-row 

TR 

table-row-group 

TBODY 

table-header-group 

THEAD 

table-footer-group 

TFOOT 

table-column 

COL 

table-column-group 

COLGROUP 

table-cell 

TD. TH 

table-caption 

CAPTION 


@7.5.2 •列 ( column ) に指定できるプロバテイ） 

HTML の TABLE モデルは，行 ( row ) を基本にしています.そのため，スタイルの細かい 
調整は行（あるいはセル）単位で行います•列 （ CO じ要素， COLGROUP 要素）に指定できる 
ブロ パティは，次のものに限定されています. 

border , background , width , visibility 
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7.5 TABLE —^ 


#7.5.3. TABLE 専用プロパティ 


1 ※〇 


aption-side キャブシヨンの位置 

値 top I bottom I left I right 

初期値 top 

適用対象 table-caption 

进承される？ yes 


■# 


CAPTION (テーブルの見出し）の表示位置を決定します. 


.こ:ベ‘ 




※ table-layout レイアウト方法 C 


値 

初期値 
遇用対象 
进承される？ 


I fixed 

auto 

table, inline-table 
no 


テーブルの レイアウトの指定方法の指定です. auto であれば表示幅にあわせて動的に決定さ 
れ， fixed であれば表示幅にかかわらず一定サイズで決定されます.処理は fixed の方が速く， 
また WWW ブラウザへの負担が少ないでしよう.しかし，読み手の0山度の面では auto の方 
が優れています. 

仕様#には auto 時の処理アルゴリズムの指針が書かれていますが,本，冬では省略します. 


義 )7.5.4. table-cell における vertical-align の解釈 

TABLE では，「セルそのもののサイズ」よりも「セルの内容を表示するために必要なサイズ」 
が小さいことがほとんどです.そのような場合は，自動的にパディングを生成することでつ 
じつまを合わせます. 

table - cell における vertical - align は，セルに内容をレンダリングするときの垂直位置そろえの 
指定として機能します(図 7-5). 値として, rbaselineJ 「 top 」 \ bottomJ 「 middle 」 のみが許さ 
れます. baseline は「最初の1行のフォントの baseline 」， 残りはセルそのものの「上端」「中央」 
「下端」を意味します. 
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図 7-5. table^cell における vertical-align (CSS2 仕様書 17.5.3 より転載) 


border 

padding 

content 







r 

lc.\l 


Text 十 

❸ 





* 

參 

* 





❺ 


f 


〇 




’ base I 


i ney 1 base I i ne* ’top’ ’bottom’ ’middle’ 

L —— =add©d padding (to make cel I as high as the row) 


top 

base I in© 

middle 

bottom 


<©7.5.5. table-cell における text-align の拡張 

text-align の節 (5.5.1) で言及したように, 「text-align:"."」 などとすることで小数点そろえを 
指示できます. 


#7.5.6. TABLE のボーダー処理モデルの種類 


r ※ border-collapse TABLE のボーダー処理モデルの種類 

値 

collapse 1 separate 
パ a 合分離 V 


初期値 

collapse 


適用対象 

table, inline-table 


継承される？ 

m - 

yes 

- i 




物 S) 


collapse の慝味は「倒壊，崩壊，衰弱，折り S み j なのですが. 「collapse モデル』の内 
容的な意味合いから f 融合モデル j という表現を用います. 


TABLE のボーダー処理方法を決定します.それぞれの値に応じて，次の項で説明するよう 
に処理されます. 
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m 


^.5.7. 分離 ( separate ) ボーターモデル 

rborder-collapse: separate] の場合，セルの 1 つ 1 つが独立したボーダーを持つものとして処 
理されます.すなわち，隣接するボーダーの間には， さらなる 隙間が存在することになりま 
す（闵 7-6). 


図 7-6. 分離モデルのホーダー表現 



※ border-spacinq ボーダー同士の間隔 

頎 <length> 〈 length 〉？ 

"『縦横』あるいは一括指定V 
初期値 0 

通用対象 table, inline-table 

进承される？ yes 

マイナス値 不可 


セルのボーダー M 士の問隔を設定します.セルにボーダーがない場合には，セルとセル C 
| Hj | 柏になります（これとは別に， margin や padding も存効ですのでご注意ください）. 

X このブロパテイの定義は， r < length >{1.2} J が正しいような気がします • あくまでも筆 
♦ノ者の私見ですが. 


empty-cells 

値 

初期値 
適用対象 
継承される？ 


空セルの処理 

show I hide 
show 
table-cell 
yes 
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空セルのボーダーを表示するかしないかを指定します（図 7-6 を参照）.これも分離ボーダ 
ーモデルのみのプロパテイです. 


継承の利用による一括指定 

empty-cells ブロパティが適用されるのは TD 要素や TH 要素ですが，シートとしては TABLE 要素に 
empty-cells ブロパティを記述しても構いません. TABLE 要素には empty-cells ブロパティは適用されませ 
んが，このブロパティは継承されるため，一括して TD 要素や TH 要素に empty-cells ブロパティを記述し 
たのと同じ効果が得られます. 

TABLE.HAVEEMPTY{empty-cells : hide) 

/•HAVEEMPTY クラスの TABLE は，空セルのボーダーは表示しなぃ */ 

同じような効果は. LI 要素ではなく UL 要素に list-style 系ブロパティを指定しても得られます.ちよつと 
した視点の違いですが，檇造を整理するのに役立つ発想だと思われます. 


#7.5.8. 融合 ( collapse ) ボーダーモデル 

► 重ねあわせ処理 

[ border-collapse: collapse」 の場介，隣接するセルのボーダーは独、 Z したものではなく，融1> 
したものとして処现されます.正しくは，隣接するボーダーは同じ中心線をもって描かれ， 
後ろのセルのボーダーが前のセルのボーダーの上に描かれていきます.すなわち，隣接する 
ボーダー同士は氓なります（図 7-7). なお， border-spacing プロパティは無効になります. 


図 7-7. 分離モデルのポーダー表現(一部) 


点線が ボーダーの 中心線 

隣接するボーダーは，中心線を共有する 

実線がボーダーの例 
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7.5 TABLE 


► 重ねあわせ処理における r ボーダーなし』処理 

ところで，「ボーダーなし」と指定されたセルと「ボーダーあり」と指定されたセルが隣接 
する場合，隣接部分のボーダーをどのように処理するべきでしょうか. separate モデルでは 
各々のボーダーは別の位置に描かれますので，どちらの指定も尊重できます.しかし， 
collapse モデルではボーダーを重ねがきするため，一方を尊重すれば他方の指定を守れないこ 
とになります. 

この矛盾を処理するために， CSS 2 では border - style ブロパテイのキーワードに 「 hidden 」 を 
導入しました.すなわち， 「 noneJ は「弱い“なし”」, 「 hidden 」 は「強い“なし”」なのです 

( 表 7-9 ，図 7-8). 


表 7-9. 「ポーダーなし』のコンフリクト処理方法 




fboorder - style : noneJ 

隣接部分の border - style が none か hidden の場合だけ非表示に 


なります. 

[ border - style : hidden ] 

隣接するセルの border - style にかかわらず.隣接部分もろとも非 


表示になります. 


(If ) 上下左右のポーダーで独立して処理されます.この処理は，あくまで融合モデルのみの処 
理です. 


図 7-8. TABLE のボーダー非表示処理結果 


名前 

楽器 

TABLE) 

border: solid medium; 

} 

John 

Guitar & Chor 

border-style: solid hidden; 
border-width: medium; 

し{ 

border-style: none hidden; 

Paul 

Vocal & Base 

Ringo 

Drums 

George 

Guitar & Chor 

} 


TABLE 要素には四方にボーダーが指定されているが， 

TH ， TD ともに左右が hidden であるため， 

左右のボーダーは消えている。 

TD の上下は none であるが， 

最初の TD(John の行）の上ボーダーは TH によって， 

最後の TD (George の行）の下ボーダーは TABLE によって， 
それぞれ表示されている。 
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ユーザ 

國 

インタフェース 


(注：システムフォントについては 5.3.3, システムカラーについては 5.4.3 で ii ■及しました. 


©7.6.1. カーソルの指定 


W ' - 

※ cursor 

カーソル（マウスポインタ）の形状 

- ^ 

値 

[[< URL > ,]* 

[auto 1 crosshair 1 deTault 1 pointer 1 move 1 
e-resize 1 ne-resize 1 nw-resize 1 n-resize 1 

se-resize 1 sw-resize 1 s-resize 1 w-resizel 
text 1 wait 1 help ]] 


初期値 

auto 


適用対象 

全要素 


进承される？ 

h - 

yes 

■ A 


勢 


マウス（ポインティングデバイス）を川いるシステム輿用のプロパテイで，表示された要素の 
上にカーソル（マウスポインタ）をあわせた時に表示するべきカーソルの形状を指定します. 

指定内界は， （) 個以上の URL (カーソルファイルを指すもの：その後には必ずカンマが必要） 
と，ひとつのキーワード（必須）です.複数の URL を指定した場合は，前から順に読み込み 
を試み， id •初に成功したものを表示します.ひとつも読み込めなかった場合は， ifi •後の「キ 
ーワード」に対応するシステムカーソルを表示します. 


カーソルファイルの形式は？ 

CSS 2 の仕様書は，カーソルファイルの形式を特定していません. CSS 2 仕様 B の 18.1 の例では ， URL 
に指定するカーソルの拡張子は r.curj r.csrj でした. 

P { cursor : url (" mything . cur "), url (" second . csr "), text ; } 


しかし， GIF ファイルなどが利用されるのではないか.と筆者は考えています.あくまでも私見ですが. 











7.6 ユーザインタフェース 


► キーワードの解説 
auto 

www ブラウザが状況に応じて適切なものを選択します. 
crosshair 
十字 （ + ). 

default 

そのシステムで標準的に用いられるカーソル.一般的には「矢印」. 

pointer 

その WWW ブラウザがリンク（アンカー要素）のために利用するカーソルと同じ物. 
move 

対象が動かせることを示唆するもの. 

e - resize , ne - resize , nw - resize , n - resize , se - resize , sw イ esize , s - resize , w-resize 

サイズ変更が可能であることを示唆するもの.頭文字は「東西南北」8方位を意味している. 

text 

選択できるテキストであることを示唆するもの.一般には「上」. 
wait 

システムが「忙しい （ BUSY )」 である旨を示唆するもの.一般には「時計」「砂時計」. 
help 

対象にヘルプが用竞されていることを示唆するもの.一般には「?」やバルーン. 

#7.6.2. アウトラインの指定 

► アウトラインとは 

CSS 2 が考える「アウトライン（縁取り）」は，ボタンなどのフォーム部品や画像（イメージ 
マップ時は，各部分）の回りに表示される縁取り線です.「ボーダー（枠)」と異なり，アウ 
トラインの形状は対象物の形状と同じ形をしています.すなわち，対象物が丸ければアウト 
ラインも丸いのです（ボーダーの形状は，要素内容の表示に必要な“四角”に固定されてい 
ます）.あくまで揉取り線ですので，ボーダーのような「上下左右」の概念はありません. 

「アウトライン」が威力を発揮するのは， r ： focusJ などのダイナミック疑似要素との連携時 
でしょう.普段はアウトラインを表示せず，「マウスをかざした」「選択された」などのアク 
シヨンに応じてアウトラインを表示するようにすれば，ユーザは「自分が何をしているのか」 
を明確に意識できます.このような指定は，とくにイメージマップで有効でしょう.なお， 
この処理を考慮してか，アウトラインの表示/非表示はレイアウトに影嚮を及ぼさないとさ 
れています. 

なお，ボーダーを描いている場合，アウトラインはボーダーの外側に描かれます. 



※ outline-width 

アウトラインの幅 


値 

[thin 1 medium 1 thick 1 < 一般サイズ〉] 


初期値 

medium 


適用対象 
&継承される？ 

全要素 

no 


r 

_ 


_ & 

r x 

※ outline-stvie 

アウトラインの線の形状 


i 

[none 1 dotted 1 dashed 1 solid 1 double 1 groove 1 
ridge 1 inset 1 outset] 


初期値 

none 


適用対象 
进承される？ 

全要素 

no 


P -^ 

k ^ 

※ outline-color 

アウトラインの色 



< 色 > 1 invert 

"任意の色1地の色を反転 V 


初期値 

invert 


適用対象 
进承される？ 

全要素 

no 



値 

初期値 
適用対象 
进承される？ 


アウトライン系の一括指定 


[ <outline-color> II <outline-style> II <outlme-width> ] 
個々のブロパティの初期値 
全要素 


アウトライン系のプロパティは，ほぼボーダー系のプロパティと同じです.ひとつだけ違 
うのが，色指定における 「 invert : 反転」でしょう.これは特定の色を指定するキーワードで 
はなく，対象の色を反転させた色を指定するキーワードです. 


7.6.3. 拡大縮小 


CSS 2 仕様# 18.5 に 「 Magnification 」 というものがありますが，ここには 「 CSS 2 対応の 
WWW ブラウザであれば，文書表示の拡大縮小機能をサポートしてほしい」とだけ書かれて 
います.とくに拡大縮小のためのプロパティを定義するものではありません. 







7.7 音声再生 一{ 



音声再生 



©7.7.1. 音声再生の意義 

文邊の音声再生というと，一般には视觉障碍者むけの処理だと思われがちですが，実際に 
は皆の役に立つものです.たとえば， 劇の 台本における役者への指示#きとして CSS 2 を用い 
れば，その内容をコンピュータによって客観的に確かめられます（もちろん，芸術性には欠 
けるでしょうが).また， CSS 2 の音声再生の範疇には BGM や「章の開始音」なども含まれて 
いますので，スタイルシート中に「スクリーン表示用」と「音声再生用」の闽方を記述して 
おけば，それだけでマルチメディアプレゼンテーションが万能になります.ほかにも，いわ 
いる 「ながら』 仕事のためには，コンピュータが文内:を読み上げてくれると便利だと思いま 
せんか？ 

@media aural{ 

P.heidi{/* ハイジ */ 

voice-family: female;/* 女の子 •/ 
pitch: high;/* やや甲高い*/ 
pitch-range ： 80;/* やや感情の入れすぎ*/ 
azimuth: center-left;/* 左呑りの位置で再生*/ 

} 

P. peter {/* ペーター*/ 

voice-family ： male;/* 男の子 •/ 
pitch: medium ； /* 棵準的な口調*/ 
pitch-range ： 50;/* 標準的な感情表現*/ 
azimuth ： center-right;/* 右寄りの位置で再生*/ 


} 

P.goat{/* 

p 丄 ay-during : url(meeeee.au) mixed repeat; /•メェェェェ */ 
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#7.7.2. 音素調整に関するプロパティ 






※ voice-family ボイスフアミリー 


値 

初期値 
適用対象 
进承される？ 


[[くファミリー名> 丨く系統名〉]，]* [くファミリー名> 丨く系統名〉 
実装依存 
全要索 
yes 


フォントフアミリーならぬボイスフアミリーです.「系統名」には ， [male (男性 )」 「female 
(女性 )」 「child (子供)」の3つだけが用意されてぃます. 




フォントフアミリーフアイルならぬボイスフアミリーフアイルというものは存在するので 
しようか？フォントファミリーと同様に考えるのであれば，すべての音素の発音が.あ 
る程度以上の音程に対して用恿されていなければなりません.「勝新太郎の声 j や「オー 
ソン•ウェルズの声 j が発売されていたら面白いと思うのですが，現実的にはどうなんで 
しよ *3. 



※ volume 


値 


初期値 
適用対象 

パーセントの意味 
进承される？ 
マイナス値 



音屋 

< 数値 > I < パーセント > I silent I x-soft I soft I medium I 
loud I x-loud 

"0 から100,ただし 0 は無音ではない*/ 

/•silent は無音*/ 

/* x-soft から願に0, 25, 50, 75,100と同じ*/ 
medium 
全要素 

親要素の volume に対する割合 

yes 

不可 



备' 


音 M ： を〇から1〇〇の範囲で指定します.ただし，0 は必ずしも無音ではありません . 無音は 
キーワード 「 silent 」 で指定します.なお， silent 指定では，本来読み上げるのに必要だった時 
問だけ「休む」ことになります.読み飛ばすのであれば， 「 display : none 」 あるいは 「 speak : none 」 
を指定します. 
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ダイナミックレンジ 


音楽業界の用語で，再生できる最小の音量と最大の音屋の間のレンジ（幅）をダイナミックレンジといい 
ます. volume プロパティの〇〜100は，基本的にはダイナミックレンジに対するパーセントだと解釈でき 
ます. 

さて， CSS 2 の仕様靄には，ダイナミックレンジの利用法に関して面白い記述がありますので，要約して 
みます. 

• ブラウヴば， 状況によって,ダイナミックレンジの一部に volume 指定の0から 

100を割り当てるよ3にしてほしい.たとえば,夜中で近所に迷惑がかかるよろな状況て- 
の再生であれば, volume 指定の〇〜100を本来のレンジの〇〜40に割り振つてしまつ 
てほしい. 



読み上げ速度を，丨分問に読み上げる取語数で指定します.コメントにあげた指定は， CSS 2 
让様#が提示する「目安」の侦です.なお，相対指定キーワード 「 faster 」「 slower 」 は，親要 
素の指定からの相対指定になります. 



読み上げの平均的なピッチ（声の調子，音程）を指定します.く振動数>の単位には 「Hz 
(ヘルツ）」および 「kHz (キロへルツ）」が用意されており，数値は正の実数です.なお， 
CSS 2 仕様逬によれば，人問の喋り声の平均的なピッチは，男性で 120 Hz ， 女性で 210 Hz です. 

用意されているキーワードは，その要素のボイスファミリーにおける標準的な「低い」〜 
「高い」を要求するためのキーワードです. 
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読み上げにおけるピッチの上下変動具合を指定します.いいかえると，読み上げの抑揚具 
合を指定します.あまりよいたとえではないかもしれませんが，0だと「棒読み」で，100だ 
と「感情の入れすぎ」になります. 



アクセント位沢における咅素の発音の強調具合を指定します.数倘が大きいほど「おおげ 
さ」になります（指定するのは具体的な Hz 幅ではなく，相対的な盘味合いの〇〜 KX ) の数値 
です）. 



仕様窨の表現では,「数値が大きいほど“ carry ”， 小さいほど“ soft ”」 となっています.筆者 
の不明により，よい訳語が見当たりません.このブロパティの値が大きいほど倍音成分が多 
い音色，すなわち俗にいう「太い音になる」といえば通じるでしょうか. 
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#7.7.3. 読み上げの彩りに関するプロバテイ 



その取語を読み上げる前後の「一時停止」時間を指定します.一括指定の場合，ひとつだ 
け指定すれば「前後一括」，2つ記述した場合は順に「前 J 「後」です. 

なお，く時問〉の咕位は 「S (秒)」と 「ms (ミリ秒)」の2つだけが規定されています. 



その要素を読み上げる前後に，音の装飾を揷入する場合に指定します. CSS 2 仕様#では「音 
のアイコン」と表現されています.なお，音ファイルの形式は WWW ブラウザに一任されます. 



定義と仕様の記述が食い違っています.説明内容が正しいとすれば，ここは 
^ r < URL>{1,2}J と書かれているべきです. 
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キューの一括指定で，ひとつだけ書いた場合は前後両方を，2つ書いた場合は順に「前」 
「後」を指定したことになります. 



要素を読み上げている問に嗚っているサウンド ( BGM ) の制御のためのプロパテイです. 

基本的には， URL で指定されたファイルがその要素の BGM になります.キーワード 
「 repeat 」 があれば繰り返し再生しますが，なければ丨度しか再生しません.要素を読み上げ終 
わると， BGM も鳴り J 卜.みます. 

HTML 文讲では，要素は人れ子になっています.そのため，必然的に「親要求の背镇」は 
「チ要ぶの背误」となり，その氓ねあわせに関して注意が必要になります.背像や背馈色 
の指定では [transparent (透明）」というキーワードがありましたが，ここでは 「 mix」「autoj 
「 none 」 の3つのキーワードが用意されており，事情はなかなかに複雑です. 

URL を指定した場合には， UixJ キーワードを添えるかどうかを 決めなければ なりません. 
親要素の BGM と子要素の BGM の_方を嗚らすので あれば 「 mix 」 を指定します.自分の 
BGM だけを嗚らして親要素の BGM をスト ッブさせるので あれば， URL だけを記述し ます. 
後者の坳合，その要素が終 r したら，親要索の BGM は再開されます. 

URL を指定しない場合，すなわちその要素に特に BGM を指定しない場合でも， 「 auto 」 か 
rnonej を選択しなければなりません.親要素に BGM があった場合にそれを受け入れるなら 
ば， 「 autoj を指定します.完全に BGM をなくしたい場合は rnonej です.後者の場合でも， 
その要素が終广したら，親要素の BGM は再開されます. 

以上を表 7-10 としてまとめます. 
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なお，指定が継承されなぃのは，「子要素のところで，もうぃちど BGM を始めから再生し 
直したりはしなぃ」ためです （ CSS 2 の汎用キーワード 「 inherit 」 で明示的に継承した場合は， 
どうなるのでしよう？). 

#7.7.4. 音場における再生位置に関するプロパティ 

► PAN 調整とは 

ステレオ/サラウンドサウンドでは，同じ音を左右のスピーカーから音量（やタイミング) 
を変えて再生させることで，その音が知覚される位置を調整できます.そのような調整を 
「 PAN 調整」とぃぃます. azimuth ブロパティは，左右の PAN 調整を指定するプロパティです. 

n . CSS 2 仕様薄では 『 PAN 調整 j という用語は使われていません.これは音楽業界のスラン 
ノグです. 


ラジオドラマなどでは，登場人物ごとに PAN 位 IR を変えることで人物の違いを把掘しやす 
いように処理しています.スタイルシートでも同じような指定が可能です.なお，劇などの 
場合，舞台をイメージする意味で，人物の移動にあわせて PAN 位沢を変更するケースもあり 
ます.このような勋的な表現は CSS 2 では不可能だと考えた方が良いでしょう （ SPAN 要素を 
複雑に用いれば，実現できなくも無いですが…). 




♦ 


※ azimuth 

値— 


水平の PAN 調整 

<角度> I 


初期値 
適用対象 
継承される？ 
マイナス値 


[left-side I far-left I left I center-left I center I 
center-right I right I far-right I right-side ] 

II behind 

]I leftwards I rightwards 

/* 中央が 0 度，左がマイナス，右がブラス*/ 

center 

全要素 

yes 

可 


4 ノ 


く角度>の単位は 「deg (度 )」 「grad (グラッド )」 「rad (ラジアン）」の3つだけが用意され 
ています （表 7-11). 本書の例では deg (度）を用います. 
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左右の PAN 調整では，全円を 360 度で表現します.正面をゼロとして，時計回りがブラス 
になります. 360度=0度，180度がちょうど背面になります.なお，仕様としては「-360度〜 
360度」が記述できるため，「-180度〜180度」を用いるのが理解しやすいでしょう （-90 度= 
270度です）.また，ブラス記号「+」は赏いても 「 l F かなくても同じになります. 

用意されているキーワードには，絶対衍定と相対指定があります.まず，絶紂指定ですが, 
キーワード「 left - size 〜 right-side J とオプションキーワード「 behindej が存在します . behinde 
無しでは前面 (-90 度〜90度）が表現でき, behinde を付けると背面 (90 度〜180度, -180 度 
〜 -90 度）が表現できます.数値による絶対指定とあわせて，図 7-9 に示します. 


図 7-9. 左右 PAN の角度の慂味と.対応するキーワード 
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相対指定は，親要素の再生位置からの相対指定になります.時計回り方向（ブラス）が 
「 rightward 」， その逆（マイナス）が 「 leftward 」 で，どちらも20度ずつの移動になります•な 
お，「値の限界を超えたらどうなるか」には言及されていませんが，回転しつづけると解釈し 
てかまわないでしよう. 


rbehindj 単独指定について 

定義としては，キーワード fbehindj の単独指定も可能です.しかし.仕様書にはその埸合の処理が記 
述されていません.可能性としては，相対指定であるとして「鏡あわせに移動 J 『180度移動 j が考えられ 
ます. 

しかし.仕様■中の指定例では， rp.ccmnent { azimuth: behind } /*180deg */J とあるので， 

ひよつとすると reenter behind] として扱うのかもしれません. 

個人的には，これも定義ミスで，本来は次のよろになつているべきなのではないか，と考えています. 


※ azimuth 

水平の PAN 調鍪 

-^ 

レ 

[ 

[ left-side 1 far-left 1 left 1 center-left 1 center 1 
center-right 1 right 1 far-right 1 right-side ] 
behind ? 

]1 leftwards 1 rightwards 

/* 中央が 0 度，左がマイナス，右がプラス*/ 

，-- d 


♦ 


勢 



※ elevation 


初期値 
適用対象 
进承される？ 


マイナス値 


垂直 の PAN 調整 

く 角度 > I below I level I above I higher I lower 

/* 水平が 0 度，下がマイナス，上がブラス*/ 

/*-90 deg , Odeg , 90 deg , +10 deg , -10 deg */ 

level 

全要素 

yes 

可 



上下の PAN 調整では， -90 度〜 90 度を用います.キーワードの意味はコメントのとおりで 
す.なお，相対指定キーワード 「 higher 」「 lower 」 は，親要素の指定からの相対指定になりま 
す. 
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#7.7.5. その他 



「 display 」 ブロパティの音声再生専用の拡張だと捉えてください （ display ブロパティは，す 
ベてのメディアを対象にしたブロパティです）.といっても， CSS 2 の段階では「普通に読むか, 
スペルで読むか」しか指定できません. 


「スペルで読む」とは，英語圈の場合， spell という単語を「スペル」と読むのではなく， 「 s , 
p , e , I , I (エス，ピー，イー，エル，エル）」と読む，ということです.具体的には， 「 ODA 」 
を「おだ」ではなく「オー，ディー，エイ」と読んでほしいならば， rspeak : spell - outJ を指定 
します. 

「 speak : none 」 は「読み飛ばす」ための指定です. 「 display : none 」 は子要素もろとも読み飛 
ばしますが， fspeakinonej では子要素は読み飛ばしません. 




CSS 2 仕様菌には確かにこのように窗かれているのですが，定義と説明が逆ではないか. 
と思われます. display ブロパテイは継承されないため子要素には影*を与えず. speak 
ブロパテイは継承されるため子要素にも影響が出るのではないでしようか. 


纖 


HTML4.0 の ABBR 要素と ACRONYM 要緊 


先の 「 ODAJ を 「く SPAN CLASS =" RYAKUGO">ODA く / SPAN 〉』 などと表現しても檇いませんが，実は. 
HTML 4.0 の新しいインライン要素として.「頭文字•略語 J に相当する fABBR 要素 j と 「ACRONYM 要 
棄 J が用意されています.こちらをもちいるのが本道でしよう. 


ABBR, ACRONYM{speak: spell-out} 

ところが，日本人にはこのふたつの要素の使い分けが良く分からないのです ( ToT ) 
なお， HTML 4.0 仕様霤 9.2.1 の例では， ABBR 要素に適した単語として 「WWW 
があけられており， ACRONYM 要素として fWAC . RaderJ があけられています. 


HTTP , URI . MassJ 
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i 

g 

※ speak-punctuation 記号の読み上げ方 

W 

を 

値 code 1 none 

初期値 none 

適用対象 全要素 

^継承される？ yes ^ 

記号 「 U 0 U ;:」 などの読み方を指定します.通常は 「 none 」， すなわち，読み上げませ/ 
「 speak - punctuation : code 」 と指定すると，「カツコ開く」などと読み上げます. 
b 免 

W 

1/ • 

※ speak-numeral 数値の読み上げ方 

W 

1 卜 

値 aigits 1 continuous 

初期値 continuous 

適用対象 全要素 

^进承される？ yes ^ 

名 

fT %, 

数値の読み上げかたを指定します.たとえば，「123」の埸合， 「 comimjous 」 では「ひゃく 

W 

に 


じゅういち」などと読み， 「 digits 」 では「いちにいさん」と読みます. 

©7.7.6. テーブルの 読み上げ 

► 『データのセル j と r 見出しのセル j の関係の表現方法 

HTML の TABLE 要素で作成できる表の惝成要ぶには，大きく分けて「データのセル （ TD 要 
素)」と「見出しのセル （ TH 要素)」があります.ところで，「あるセルの見出しを探すときに 
表を行方向に見るべきか，列方向に見るべきか」は， HTML 3.2 のマークアップでは判別でき 
ません.また，見出しは行列の両方に存在するかもしれません.あるいは，同じ方向に2つ以 
上の見出しがあるかもしれません.このような場合には，一方だけが意味を持つのでしょう 
か，双方が関連しているのでしょうか？ （図 7-10). 


図 7-10. 見出し檇造の複雑な表の例 


名前 


楽器 


名 

姓 

主 

副 

ジョン 

レノン 

ギター 

コーラス 

ポール 

マッカートニー 

ボーカル&ベース 


リンゴ 

スター 

ドラム 

コーラス 

、、一 
ンヨーン 

ハリスン 

ギター 

コーラス 
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》一 Chapter 7 new feature in CSS 


図 7-10 を見ても分かるように， HTML 3.2 の不十分な TABLE マークアッブであっても， 
WWW ブラウザでコンピュータ画面に表示してしまえば，見出しの関係はなんとなく判断で 
きます.だからといって，そのままでは情報として不十分です.そこで， HTML 4.0 では 
「 HEADERS 域性」 「 SCOPE 厲性」 「 AXIS 诚性」を導入して，どの見出しがどのセルを対象にし 
ているのかを記述できるようになりました.いいかえれば，見出しによってセルを分類でき 
るようになったのです.詳しくは HTML 4.0 仕様窗丨丨穿を参照願いたいのですが，以降の例を 
読んだだけでも，ある程度はご理解いただけると思います. 


► 表の音声再生における「見出しのセル j 表現 

ところで，赀さんは表を見ることができない人に，表の内容を読み上げることによってそ 
の内容を伝えようとしたことがあるでしょうか.無いならば想像してほしいのですが，各セ 
ルを左上から順に機械的に読み上げたときに，その内容がどれだけ伝わるでしょうか？おそ 
らく何も伝わらないと思います. 

表の内容を読み上げで表現するには，なんらかの工夫が必要になります.そのために CSS 2 
が取りいれた工夫は，「データのセルを読み上げるときに，その見出しを読み直す」というも 
のです. 


^ - 

[ ※ speak-header テーブル見出し読み上げの制御 


値 


once I always 


/* 見出しは見出しセルでのみ読む.各セルの読み上け時に見出しも読む V 


初期値 
適用対象 


I 継承される？ 

# - 


once 

後述のよろに見出し情報が整備された TABLE 要素 
yes 


命 




[ speak - header : alwaysJ と指定すると,先に延べたように「データのセルを読み上げる時に, 
その見出しを読み邀す」ことになります.図 7-11 に，読み上げイメージを#き留めます. 


図 7-11. TABLE の読み上けイメージ 


名前 

楽器 



John 

Guitar & Chor 

名前： John 

楽器： Guitar & Chor 

Pau 

Vocal & Base 

名前： Paul 

楽器： Vocal & Base 

Ringo 

Drums 

’名前： Ringo 

楽器： Drums 

George 

Guitar & Chor 

名前： George 

楽器： Guitar & Chor 
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7.7 音声再生一 < 


► 付録： SCOPE 属性の使い方 

図 7-1 1の TABLE の記述例を提示します. 

見出しが行あるいは列の一方にしかない場合は， TH 要素の SCOPE 厲性によって，見出し構 
造の方向を表現できます.属性値のキーワードとしては，さしあたっては 「ROW (行）」と 
「COL (列)」だけ覚えれば十分でしょう. 


<TABLE SUMMERY = ■この表は，ビートルズのメンバー名と，一般的な担当楽器を示すものです ■ _> 
< CAPTION > ビートルズのメンバー表< / CAPTION 〉 

< TR > 

<TH SCOPE =" COL _> 名前 </ TH > <TH SCOPE =- COL _> 楽器 </ TH > 

</ TR > 

< TR > 

< TD > John < / TD > < TD > Guitar & amp ; Chor </ TD > 

</ TR > 

< TR > 

< TD > Paul </ TD > < TD>Vocal & amp ; Base </ TD > 

</ TR > 

< TR > 

< TD > Ringo </ TD > < TD > Drums </ TD > 

</ TR > 

< TR > 

< TD > George </ TD > < TD > Guitar & amp ； Chor </ TD > 

</ TR > 

</ TABLE > 


► 付録： HEADRES 属性の使い方 

見出しが行列両方に存在したり，列だけでも r 大見出し」と「小見出し」が存在する場合 
(図 7-10) には， HEADRES 属性を用います. 


図 7-10. 見出し構造の複雑な表の例（再掲 ) 


名前 

名 

姓 

楽器 

主 

副 

ジョン 

レノン 

ギター 

コーラス 

ポール 

マッカート, 

ニーボーカル&ベース 


リンゴ 

スター 

ドラム 

コーラス 

、令 、一 

ン3 _ン 

ハリスン 

ギター 

コーラス 
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このような場合は， TH 要素に ID 属性をつけ， TD 要素に対応する見出しセルの ID 名を記述 
します.複数の見出しと関係する場合は，大見出しから順に空白で区切って書き上げます. 




厳密には，かならずしも「大見出しから順に j と決められているわけではありません.た 
だ，そのよろに活用したほうがより効果的です. 


<TABLE SUMMERY=- この表は，ビートルズのメンバー名と，一般的な担当楽器を示すものです . ■> 
<CAPTION> ビートルズのメンバー表く / CAPTION 〉 

<TR> 

<TH ID="name B COLSPAN=_2-> 名前 </TH> 

<TH ID= B insf COLSPAN=-2 ■> 楽器 </TH> 

</TR> 

<TR> 

<TH ID= " first ■ > ^ </TH> 

<TH ID=-family■> 姓 </TH> 

<TH ID=-main_>^</TH> 

<TH ID=-sub_:^lj</TH> 

</TR> 

<TR> 

<TH HEADRES="name first■> ジョン </TH> 

<TH HEADERS= B name family_> レノン </TH> 

<TH HEADERS= - inst main-> ギター </TH> 

<TH HEADERS= - inst sub_> コーラス </TH> 

</TR> 

<TR> 

<TH HEADRES="name first■> ポーノレ </TH> 

<TH HEADERS="name family ■> マッカートニーく / TH> 

<TH HEADERS:■ inst main_> ボーカル &amp; ベースく / TH> 

<TH HEADERS= B inst sub B x/TH> 


</TR> 

<TR> 

<TH HEADRES='name first_> リンゴ </TH> 
<TH HEADERS="name family-> スターく / TH> 
<TH HEADERS=-inst main B > ドラム </TH> 

<TH HEADERS=_inst sub_> コーラス </TH> 
</TR> 

<TR> 

<TH HEADRES='name first■> ジョージ </TH> 
<TH HEADERS=-name family_> ハリスン </TH> 
<TH HEADERS="inst main"> ギター </TH> 

<TH HEADERS= B inst sub-> コーラス </TH> 


</TR> 

</TABLE> 
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r アクセス性 j といろ思想 


HTML 4.0 の仕様において，「アクセス性の確保 j を盛り込むことは重大な課題でした.「アクセス性の確 
保』とは，『マウスを使わなくても，キーボードシヨートカットだけでフォームやリンクを操作できる j [印 
刷結果（インタラクティブ性無し）でもリンクなどの恚図えられる j 「音声再生でも文醫を理解できる J 
といったようなことです.そのために，アンカー要素やフォーム部品には 「 ACCESSKEY 属性 j が用意され 
ましたし，ほぼすベての要素に TITLE 属性 （ IMG 要素の AU •属性と同等）が用恚されました.先程紹介し 
た HEADER 属性や SCOPE 属性は必ずしも音声読み上げを可能にするための属性ではありませんが，これ 
らによって（表の見出し構成を明確にすることで）音声再生でも表を理解可能になります. 

しかし，『コンピュータ画面に表示すること J 「マウスを用いること』などを前提にしてしまえば.このよ 
ろな属性を用いなくても記述者の意図はなんとなく伝わってしまろものです.そのせいか，暗黙のろちに 
r コンピュータ画面 j 「マウス』を前提にするきらいがあり，既存の HTML 解説書はアクセス性に関する新 
しい属性の存在に言及せずに済ましてしまうケースがままあります.お手もとの HTML 4.0 に閡する靨篛の 
中に， ACCESSKEY 属性や SCOPE 属性の解説があるかどうかチェックしてみてください.たぶん，記述さ 
れていないと思います.本霱の HTML 解説部分でも省略しています.これは大変に遺憾なことです. 

画像を多用される方. TABLE を多用される方，フォームを多用される方.フレームを多用される方は， 
ぜひ一度アクセス性の確保についてご考應ください.その際には， W 3 C の内部機関 WAI (Web 
Accessibility Initiative ) の文書を参考にするとよいでしよう. 

http :// www . w 3. org / WAI / 
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資料 


スタイルシートの先方互換不明な記述の処理方法 


レベル2の CSS をサボートする WWW ブラウザが，レベル1のスタイルシートを読みこなせるのは 
普通のことです.これを後方互換 （ backward - compatibility ) と呼びます.しかし，レベル1しかサボー 
卜していない WWW ブラウザがレベル2以上のスタイルシートを読み取った場合には，当然，一部の 
指定が処理できないはずです.そのような際に（すべてを無効にするのではなく）一部だけでも有効 
にするための「不明な記述の処理方法」が定められていますので，ここで簡単に紹介します. W 3 C 
はこれを「先方互換 ( forward - compatibility ) J と呼んでいます. 

♦ 知らない@ルールは無視する 


受け取ったシート： 


@three-dee { /* まったく知らない @ ルール， 

@ import ■basic.css ■ ； 

HI{ color ： red } 

} 

HI {color: blue} 


処理後： 


HI {color ： blue} 


♦知らないプロパティのある宣言は無視する 


受け取ったシート： 


color: white ； 
background : block; 

text-shadow: #888 #444 #222; /*CSS2 のプロパティ 


処理後： 


color ： white ； 
background : block; 














♦知らない値のある宣言は無視する 



現在の WWW ブラウザの CSS 1 サポ■卜状況 

本? 1 F 執难時では，各ブラウザは CSS 2 成立以前にリリースされたものであるため，今回の調夼は 
CSS 1 に限定しました.また，この調査は Windows 95システムにおける Internet Explorer 4.0 日本語版 
(WWW ブラウザのみの設定）と Netscape Navigator 4.0日本語版のみに限定してあります.マッキント 
ッシュや各穐 UNIX をお使いの方，あるいはほかの WWW ブラウザを用いている方は，あらかじめそ 
の旨をご了承くださるようお願い申し上げます. WWW ブラウザのバージョンは， Netscape 
Navigator 4.04, Internet Explorer 4.00 です.執％ 段階での 新バージョンは Netscape Navigator 4.05, 
Internet Explorer 4.01 ですが，これらはマイナーチェンジ（であるはず）なので，大きな違いはないも 
のとさせていただきます. 

調査した内容は以下のとおりです.ただし，実際にシートを構築していく上で別途気づいた点も報 
告します.なお，「正しく機能するのが当たり前」と考え，正常である場合は省略します. 

♦基本 チェック 

• 各ブロパティがそれぞれ独立して動作するか（無効 丨 有効だがおかしい） 

これを「ブロック系要素（実際には HI , H 2, P ， BLOCKQUOTE ， DIV)J 「インライン系要素 
( STRONG , A , SPAN )」 「リスト ( UL , OL , LI)J 「置換要素 （ IMG )」 について調べた. 


♦応用 チェック 

• em ユニッ トは正しく処理されるか 
• インライン系要素にボーダーラインはつくか 
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• マイナス値を受け付けるか 
• ボーダー表示の入れ子は可能か 
• ボーダー内部に表示されるときも，各種指定は正常か 
• 継承は正しく処理されるか 

• カスケードは正しく処理されるか（含む：ユーザ標维シート） 

•シート選択， MEDIA 選択は機能するか （—4 章で報告したとおり，どちらも無効だった） 

• シー トを off にできるか 
• 相対 URL 計算は正しいか 
• 印刷できるか 

•その他，不条理な処理ミスをしていないか 

(1 )Internet Explorer 4.0 

全体の評価 

本迸では触れませんでしたが， CSS 1 の仕様許はプロパティを“招極的にサポートするべき”コ 
ア •ブロ パティとそうでないものに分け， WWW ブラウザの開発者に対して「コア•プロパティは必 
ず守ってほしいが，そうでないものは省略してもよい」という指針を与えています. 

Internet Expk ) r er 4.0 は，この「コア」に閲してはほぼサポートしていますが，それ以外のサポートは 
あまり進んでいません.誤解をおそれずにまとめれば，「派手な部分は省略されているが，竪実」だ 
といえるでしよう.「有効になるものは，常に正常」であり，ずいぶん「真面目」だといえます. 

しかし， display ブロパティの指定が無効になるなど，複雑なレイアウトを実現するためのいくつか 
の機能がサボートされていないのは残念なことです（もっとも， CSS 1 仕様#はこれらをコア•ブロ 
パティに含めていません）. 

常に無効になるブロパティ 
♦全体 

•スタイルシートを無効にできない. 

• @ import は 「 url ( 〜)」形式しか受けつけない. 

•スタイルシートの••選択”機能がない. 

• 疑似要素 ( first - line , first - letter ) は無効. 

• エラー処理が甘いのか，キーワードに""を付けても有効になる. 

♦フォント系 

• font - variant の small - caps はたんなる「大文字」になる. 

♦色と背景効果系 

すべて有効 


245 




♦テキスト 属性 系 

• word-spacing は無効 （ letter-spacing は有効）. 

• verlical-align は super , sub 以外は無効. 

• text-decoration の blink が無効. 

• text - align の justify は複数行にわたるブロックにのみ有効. 

♦ ボックス系，表示 位置調整 

•インライン系要素にマージン，パデイング，ボーダーラインを付けても無効になる （ SPAN 要素 
で width が明示されている場合は，有効にはなるが表示結果が正しくない）. 

• border - style の dotted と dashed が無効 （ solid と解釈される）. 

• DIV , SPAN を除く文字セクションの width , height が無効になる（画像などは OK ). 

• DIV , SPAN を除く文字セクションのフロート化が無効になる. 

♦その他の表示 調整 系 

• display ブロパテイの「変更」が無視される. none は有効. 

• white-space の変更が無効. 


(2) Netscape Navigator 4.0 

全体の評価 

Internet Exploi * er 4.0 とは対照的に，「派手な部分のサボートが進んでいるが，土台部分の不具合が多 
い」とまとめられるでしよう.とくに em ユニットの不完全な処理は，ときにはレイアウトの致命的 
な崩壊をもたらします.しかし，不具合を把握し，それを避けるように注意しながらスタイルシート 
を記述すれば，効果的なレイアウトを実現できると言えます. 


k 計は r 理想図』に基づいて行う 


ここでとくにアピールしておきたいことは . [Netscape Navigator 4.0 の表示結果だけに基づいてスタイ 
ルシー トを記述すると，おかしなシートになつてしまう J という点です. 

"フォントサイズを「親要素の3倍 J にしたいのに， 3 em と記述したら6倍くらいになつてし 
まつた.じゃあ， 1.5 em と書いておけばちようどいいや” 

などと考えてしまうと， 1.5 em を「正しく』解釈する WWW ブラウザでは望みどおりの効果は得られませ 
ん. 

スタイルシートの設計は，あくまで“理想図”に基づいて行つてください.そうしなければ，スタイル調 
整の汎用性は得られません. 

理想的なシートを記述した上でならば.現在の WWW ブラウザの不具合にあわせて.たとえば部分的に 
pt (ポイント）で記述し直すなどで対応します. 


常に無効になるプロパティ 
♦全体 

• 疑似要素 ( first - line , first - letter ) は無効. 

• 疑似クラスの active が無効. 

• @ import が無効（相当する LINK 要素を HTML 文書に記述することで対処できる）. 

• スタイルシートの“選択”機能が無い 

• ユーザ標璀スタイルシートを指定できない. 

•エラー処理が一部不正（指定値が不正だと，内がすべて無効になる）. 

• 印刷結果が画面表示と大きく異なる. 

♦フォント系 

• font-variant の small - caps , font-style の oblique が無効. 

♦色と背景効果系 

• background - position , background-attachment が無切. 

♦テキスト属性系 

• text-align の justify , text-decoration の overline が無効. 

• vertical - align は完全に無効. 

• word - spacing , letter-spacing は無効. 

• text - transform は文字コードが英語ならば有効だが，日本語コードでは無効. 

♦ボックス系，表示位 B 調整 

• border - top , border - right , border - bottom , border-left ブロ パティが無効（そのため，本®••では常に 
I border - width , border - style , border-color J を利用しました）. 

• height が無効. 

• 置換要素には width , height ともに無効. 

• border - width の％指定が有効になる（本来は“ エラー”）. 

♦その他の表示調整系 

• white - space の nowrap が無効 （ normal と解釈される）. 

• list - style-image が無効. 

• list - style - position が無効(常に outside ). 


有効だが処理がおかしいもの 

• 相対 URL が，スタイルシートからでなくそれを読み込んだ HTML 文書から計算される. 

• em ユニットの 計算が おかしい. 「その要素の フォント サイズ」であるべきなのに，「親要素の フ 
ォン トサイズ」として処理されたり，そのほかの怪しい結果になる場合がある. 

• line - height の計算がおかしい.その継承処理も不正. 

• 背景に画像を指定すると，背景色が transparent されなくなる. 

•下マージンを設定すると，上マージンもその値になる. 
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• インライン系要素に指定した背景色が正しく表示されない.ブロック系要素では正常. 

• インライン系要素にボーダーラインを設定すると，勝手に display ブロパテイが block に変更され 
る.あえて display : inline と明示するとインライン表示されるが，今度は white - space が nowrap に 
固定される. 

•ボーダーラインをつけると，それまで有効だった fom 設定などが無効になったり，表示サイズが 
変動するなどの不具合を起こす場合がある. 

• ブロック系要素の上下ボーダーラインの長さが「文字を表示するのに必要な幅」になる場合があ 
る.左右マージンを指定していれば正常に動作する. 

•カスケーデイング処理が一部不正.たとえば， BLOCKQUOTE 要素やリストにマージンを指定す 
ると， WWW ブラウザ標维のマージンに「新たなマージンを追加」することになる. 

• LI ， HR 要素に対する指定の解釈がおかしい.たとえば， LI 要素にボーダーラインを付けると， 
行頭マークだけについてしまう.本来は，項目の語句と行頭マークを囲むボーダーラインが必要. 

• HTML 文迸中で「終了タグを将略していい場合」でも，終了タグを？ T 略していると動作に不具合 
が現れる場合がある.詳しい組み合わせははっきり言えないが， DIV 要素を複雑に使用している 
場合， P 要桌の終 f タグを省略するとおかしくなる叮能性が高かった. 

• シートが長すぎたり，文锵が畏すぎたりすると暴走する. 

• そのほか，股因イ〈明で指定が無効にされる場合がある. 


Netscape Navigator 4.0 は CSS をサポートしていない？ I 

じつは， Netscape 社は独自仕様のスタイルシートとして Javascript Stylesheet (コンテントタイプは 
" text / javascript ") を提唱しています. 

同社が WWW で公開している資料によれば . Netscape Navigator はバージヨン 4.0 から CSS をフルサボ 
一卜していることになっていますが，同社が示すリファレンスで解説されている文法やブロハ # テイは一部 
CSS とは異なるものです.さらに ， Javascript Stylesheet と仕様が混同している部分がいくつも見られます. 

http://home.netscape.com/ 

http://developer.netscape.com/Library/documentation/commumcator/dynhtml/index.htm 

textAlign プロパティなどというモノが存在したり，スタイルシートの拡張子が r . htmj だったりと，なか 
なか不思議な世界が待っています a a ; 

また ， Netscape Navigator 4.0 の設定で「スタイルシートを有効 J にしていても， 「 Javascript を無効 J 
にするとスタイルシートが機能しません. 

以上のことから.「実は Netscape Navigator 4.0 はまったく CSS をサボートしておらず.単に内部的に 
Javascript Stylesheet に変換しているだけではないか，しかも変換はうまく機能していないのではないか J 
と想像できます.そろだからこそ，ここまで CSS の仕様と照らし合せた埸合に不具合が生じているのでは 
ないでしよラか. 
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CSS 2 のメデイア区分リファレンス 


C. 


♦メディア区分 


着眼点 

区分 

大区分 

画像 ( visual ), 音声 ( aural ). 接触 (tactile :点字など) 

ページ区切り 

ある ( continuous ). なし、 ( paged ) 

画素 

グリッド (grid :文字端末など).ビットマップ ( bitmap ) 

対話性 

ある ( interactive ). ない (static :印刷物など） 


♦メディアタイプが意味するメディアの性質 
















HTML4.0 クイックリファレンス 


く ！ DOCTYPE HTML PUBLIC ” -// W 3 C//DTD HTML 4.0 Frameset // EN ”> 



NOFRAMES 
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<!DOCTYPE HTli. PUBLIC M -//W3C//DTD HTML 4.0 Transitional//EN M > 


順不同 

%head.content ； - 0-1 


-TITLE —| — 林 PCDATA 

〜 / I 排除 

(%head.misc;) 


ず〜二瞧_されます 


(EMPTY) 


%head.misc ； 


%inline; 



SCRIPT 


STYLE 
〜 / 


CD AT A 


CD AT A 


(EMPTY) 
LINK (EMPTY) 

OBJECT 


0 / O flow; 


%block ； 



0 以上 

%head i ng ； - %inline; 

=(HI I H2 I H3 I H4 I H5 I H6) 

〜 / 

%旧来からの Woc / c 要素； 

%あたらしい block 要素 •、 


0 以上！一 %inline; 
ADDRESS or 

〜 / 

-尸ま 


% あたらしい block 要素； 



N0SCRIPT 0 以上 


N0FRAMES 


許されなくなります 


N0FRAMES は 
；. 定義されません 


FIELDSET 

〜/ 


順序 

-が厂し/^/! i 

1 LEGEND 

Y 

0 以上 

- %flnw 


%inline; 
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% preformatted ； 


i 以上！一 1 
or へ 

V 


0 以上 

— %inline: 


pul . ^ h 厂厂しに丨 , run 

〜 /— " 敗， BASEF0NT は 

他 / 定義されま十 

(/op re . exclusion ,) 

= (IMG I OBJECT I APPLET 

BIG\ SMALL I SUB I SUP 

FONT\ BASEFONT 


CENTER _I CENTER は削除されます 


(deblock;) 

DIR, MENU は削除さ 


BLOCKQUOTE 


になります 






%inlin©； — 



<!DOCTYPE HTML PUBLIC "-//W3C"DTD HTML 4.0 Transitional//EN”> 



ff PC DATA 

0 以上 

〇 /ophase; %inline; 

=(EMI STRONG I CITE I CODE I SAMP 
IDFNIKBDIVAR IABBRI ACRONYM) 

〜 / 

%fontsty 1 ©； - %inline' STRIKE は削除されます 

三 （ TTIIIBIUISISTR1KEIB1GISMALL) 

〜/ 


OPTION 


%formctrI ； 


or 


1 以上 

SELECT _ 2L 

〜 / 


0PTGR0UP 


(/)— #PCDATA 
1 以上 


INPUT 


V 


OPTION 


(EMPTY) 


—TEXTAREA 


.LABEL 


•#PCDATA 


0 以上 


%inline; 


排除 
(LABEL) 


%special; 


LBUTTON 

〜 / 


1 以上 

-% flow; 

排除 


(A! %formctrl; I FORM IISINDEX I 
FIELDSETIIFRAME) 

ISINDEX, IFRAME は定義されません 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 


0 以上 

—— %inline; 


丨排除 
(A) 


BASEFONT (EMPTY) 


FONT- 

〜 / 


BASEFONT, FONT は肖 IJ 除されます 


SUP 


SUB 


0 以上 

— %mline; 


BDO 


% special ; 


SPAN 


APPLET は削除されます 


APPLET 


0 以上 


PARAM (EMPTY) 


OBJECT- 


%flov 


FRAME 


1 以上 


%flow; 

FRAME は定義されません 


(EMPTY) 


(EMPTY) 


MAP — 

〜 / 

SCRIPT 


1 以上 

— AREA (EMPTY) 
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